{"id":34730,"date":"2013-07-29T22:06:38","date_gmt":"2013-07-29T16:36:38","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=34730"},"modified":"2021-06-12T09:51:29","modified_gmt":"2021-06-12T04:21:29","slug":"add-icon-font-awesome","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/add-icon-font-awesome\/","title":{"rendered":"How to Add Font Awesome Icons to Any Site"},"content":{"rendered":"

icon Fonts are the buzz. Can you use Font awesome icons to any website and get beautiful scalable and CSS styled icons. Of course you can. I find myself using Font Awesome much more in my new website design projects. Initially I thought Font Awesome was a great replacement for Glyphicons icons<\/a> in the amazing CSS design framework\u00a0Twitter Bootstrap<\/a>, but it is a must have standalone for any site.<\/p>\n

See these Like icons, they are not images, but are all actually an icon font<\/strong> in different sizes.<\/p>\n

\"Font<\/p>\n

All the large number of icons you see on this page are powered by Font Awesome<\/a>. This is much better than loading multiple icons, or adding them with custom background and CSS sprites<\/a>. Being an icon font, it has all the advantages of CSS styling – like color, size and crisp design even at large sizes as fonts can scale easily.<\/p>\n

Install Font Awesome<\/h2>\n

Installation is a snap. Although you can download and install the font on your server and call the icons from your design, the best way to install is via BootstrapCDN<\/a> – add a single line of code in your HEAD tags \u00a0– and get Font Awesome pre-hosted on a fast CDN<\/a> for superfast delivery across anywhere in the world.<\/p>\n

Add this single line of code.
\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@5.15.3\/css\/fontawesome.min.css\" rel=\"stylesheet\"><\/code><\/p>\n

Using Font Awesome<\/h2>\n

Getting the icons anywhere on the site is so simple, you would be amazed. Simply use the i class<\/span> <\/em>to get the font icon of your choice. There are now over 1000 free icons<\/strong> to choose from!<\/p>\n

\"Font<\/p>\n

For example.
\n<i class=\"fas fa-couch\"><\/i><\/code> will display a couch icon<\/p>\n

Font awesome has amazing code options which allow you to stack multiple icons<\/strong> on each other, for example\u00a0<i class=\"fa-star fa-border\"><\/i><\/code> will display a star icon with a border!<\/p>\n

Changing the icon size<\/strong> is also easy. For example\u00a0<i class=\"fa-star fa-3x\"><\/i><\/code> will make the icon size 3 times larger. Its that simple.<\/p>\n

You can also flip icons<\/strong> by 90 degrees or any degree by adding classes like fa-rotate-90<\/em>. Simply adding the class muted<\/em> will make the icon dull. There are lots of amazing uses which you can check on their site…<\/p>\n

Right now, the best way to add scalable icons to you site is using Font Awesome – all with a single line of code!<\/p>\n","protected":false},"excerpt":{"rendered":"

icon Fonts are the buzz. Can you use Font awesome icons to any website and get beautiful scalable and CSS…<\/p>\n","protected":false},"author":4,"featured_media":42217,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49],"class_list":["post-34730","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/34730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=34730"}],"version-history":[{"count":0,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/34730\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/42217"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=34730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=34730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=34730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}