{"id":139659,"date":"2015-09-29T11:00:35","date_gmt":"2015-09-29T16:00:35","guid":{"rendered":"https:\/\/getflywheel.com\/?p=13201"},"modified":"2023-11-13T12:25:05","modified_gmt":"2023-11-13T18:25:05","slug":"why-you-should-start-using-font-awesome","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/why-you-should-start-using-font-awesome\/","title":{"rendered":"Why you Should Start Using Font Awesome"},"content":{"rendered":"\n

Font Awesome<\/a> is a robust icon set that contains scalable vector icons. And amazingly enough, it is free (icons sets can be quite expensive, making this a pretty sweet deal). There are many important types of icons that come with Font Awesome: social media, UI\/web-related, and more!<\/p>\n\n\n\n

Icons are important to web projects because they are a visual way to help add meaning to elements. Font Awesome allows for an easy addition to your WordPress theme, saving valuable time because you do not need to create and save these graphics yourself.<\/p>\n\n\n\n

Font Awesome is great because…<\/p>\n\n\n\n

It’s a Font<\/h3>\n\n\n\n

From the name, it is pretty obvious what the format is, but that\u2019s what makes Font Awesome so neat. As you know, there are other options instead of using a font to display icons. You may be familiar with other approaches such as using individual images or site specific sprite-sheets for icons. Whether they\u2019re SVG, raster, or a font, icon graphics are a series of images used in specific parts of the site. These parts may be the search bar, navigation, loading icons, or any other place where indicator graphics would be appropriate.<\/p>\n\n\n\n

It’s Retina Ready and Easy to Style<\/h3>\n\n\n\n

Designers love the use of icons as fonts because of the flexibility of styling available. Plus, using a font will also render icons as sharp as your device will allow, so there’s no need to worry about creating retina graphics since Font Awesome will give you high-quality iconography on every device. In the current age of responsive design, this is more important than ever. CSS is used to style the font and can easily change the color, size, drop shadow, or  any other customizations of an icon. You get all of the styling benefits of regular text, but now with icons!<\/p>\n\n\n\n

Browsers Dig Font Awesome<\/h3>\n\n\n\n

There is no need to worry about Font Awesome\u2019s browser compatibility; it\u2019s well supported by all modern browsers. With all file formats included (.eot, .ttf, .woff, and svg), it\u2019s treated the same as other web fonts.<\/p>\n\n\n\n

It has a Performance Advantage<\/h3>\n\n\n\n

We all love fast websites, so it\u2019s important to provide that experience to your users. All the icons are included in one font file, so it only takes a single HTTP request to load Font Awesome. This is great for performance so it\u2019s worth considering Font Awesome as a solution.<\/p>\n\n\n\n

Font Awesome in Action<\/h3>\n\n\n\n

You\u2019re probably used to the normal characters or a font from your daily typing. Characters such as \u201cA,\u201d \u201cB,\u201d \u201cC,\u201d etc. are part of your daily communications. Icon fonts are just like any other font, except that the characters are styled to look like icons. The font defines the characters that are found within the site, enhanced by these rendered icons.<\/p>\n\n\n\n

Using Icons in your HTML<\/h3>\n\n\n\n

If you take a look at the CSS file, you\u2019ll see that we are using the CSS3 :before<\/code> selector, which inserts the content before the HTML object that the class is applied to. The content property is used to define the Unicode character, as you can see by this string of characters.<\/p>\n\n\n\n

\"Font<\/figure>\n\n\n\n

What is going on here? For the display of an icon, the fa<\/code> class is needed. This is what \u201cconnects\u201d it to the Font Awesome font. To display the correct icon, the  second class name will correspond with the icon you wish to display, in this case it is fa-cloud<\/code> (make note of the Unicode reference, which we mentioned previously).<\/p>\n\n\n\n

To display the cloud, this is the line of code that is needed:<\/p>\n\n\n\n

&lt;i class=\"fa fa-cloud\"&gt;&lt;\/i&gt;<\/code><\/pre>\n\n\n\n
\"Cloud<\/figure>\n\n\n\n
Do you want this to appear next to text? If so, you\u2019re in luck. Just make it part of the paragraph.<\/p>\n\n\n\n
&lt;p&gt;&lt;i class=\"fa fa-cloud\"&gt;&lt;\/i&gt; This is a cloud.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n
\"Twitter<\/figure>\n\n\n\n
Adding links is just as easy:<\/p>\n\n\n\n
&lt;a class=\"fa fa-twitter\" href=\"http:\/\/twitter.com\/morelink\" title=\"Twitter\" target=\"_blank\"&gt; Twitter&lt;\/a&gt;<\/code><\/pre>\n\n\n\n
Pseudo use with Content<\/h3>\n\n\n\n
There may be occasions where it will be more effective to use the pseudo class. For example, if the class will be used a lot, this approach would be more efficient. It would look something like this:<\/p>\n\n\n\n
.intro .widget-title:before {\n\nfont-family: FontAwesome;\n\npadding-right: 10px;\n\ncontent: \"\\f05a\";\n\n}<\/code><\/pre>\n\n\n\n
Notice the content is the Unicode reference for the speech bubble.<\/p>\n\n\n\n
More Practical Options<\/h3>\n\n\n\n
Font Awesome offers more than what designers may realize. It\u2019s easy to rotate, scale, and pull icons. Also, there are some animation options that come right out of the box. Read more about Font Awesome options.<\/p>\n\n\n\n
\"A<\/figure>\n\n\n\n
With a simple class addition, it\u2019s easy to love these rotated icons:<\/p>\n\n\n\n
&lt;i class=\"fa fa-heart\"&gt;&lt;\/i&gt; normal&lt;br&gt;\n&lt;i class=\"fa fa-heart fa-rotate-90\"&gt;&lt;\/i&gt; fa-rotate-90&lt;br&gt;\n&lt;i class=\"fa fa-heart fa-rotate-180\"&gt;&lt;\/i&gt; fa-rotate-180&lt;br&gt;\n&lt;i class=\"fa fa-heart fa-rotate-270\"&gt;&lt;\/i&gt; fa-rotate-270&lt;br&gt;\n&lt;i class=\"fa fa-heart fa-flip-horizontal\"&gt;&lt;\/i&gt; fa-flip-horizontal&lt;br&gt;\n&lt;i class=\"fa fa-heart fa-flip-vertical\"&gt;&lt;\/i&gt; icon-flip-vertical<\/code><\/pre>\n\n\n\n
Convinced?<\/h3>\n\n\n\n
It’s easy to see why so many designers love Font Awesome\u2014try it out on your next design to see if you love it too!<\/p>\n\n\n\n
And to ensure every icon load quickly and appears with crystal clarity, make sure you’re using the best possible WordPress hosting<\/a> for all your projects.<\/p>\n","protected":false},"excerpt":{"rendered":"
Font Awesome is a robust icon set that contains scalable vector icons. And amazingly enough, it is free (icons sets can be quite expensive, making this a pretty sweet deal). There are many important types of icons that come with Font Awesome: social media, UI\/web-related, and more! Icons are important to web projects because they…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":13235,"template":"","resource-topic":[1396],"resource-role":[1397,896],"resource-type":[916],"class_list":["post-139659","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nWhy you Should Start Using Font Awesome<\/title>\n<meta name=\"description\" content=\"Font Awesome is a robust icon set that contains scalable vector icons. Here's how to use it to your advantage!\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why you Should Start Using Font Awesome\" \/>\n<meta property=\"og:description\" content=\"Font Awesome is a robust icon set that contains scalable vector icons. Here's how to use it to your advantage!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/why-you-should-start-using-font-awesome\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-13T18:25:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/02\/CaTYINFUMAAI7_p.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1018\" \/>\n\t<meta property=\"og:image:height\" content=\"399\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Why you Should Start Using Font Awesome\" \/>\n<meta name=\"twitter:description\" content=\"Font Awesome is a robust icon set that contains scalable vector icons. Here's how to use it to your advantage!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/02\/CaTYINFUMAAI7_p.jpg\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/why-you-should-start-using-font-awesome\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/why-you-should-start-using-font-awesome\/\",\"name\":\"Why you Should Start Using Font Awesome\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2015-09-29T16:00:35+00:00\",\"dateModified\":\"2023-11-13T18:25:05+00:00\",\"description\":\"Font Awesome is a robust icon set that contains scalable vector icons. Here's how to use it to your advantage!\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/why-you-should-start-using-font-awesome\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/why-you-should-start-using-font-awesome\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/why-you-should-start-using-font-awesome\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Why you Should Start Using Font Awesome\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Why you Should Start Using Font Awesome","description":"Font Awesome is a robust icon set that contains scalable vector icons. Here's how to use it to your advantage!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Why you Should Start Using Font Awesome","og_description":"Font Awesome is a robust icon set that contains scalable vector icons. Here's how to use it to your advantage!","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/why-you-should-start-using-font-awesome\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-11-13T18:25:05+00:00","og_image":[{"width":1018,"height":399,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/02\/CaTYINFUMAAI7_p.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_title":"Why you Should Start Using Font Awesome","twitter_description":"Font Awesome is a robust icon set that contains scalable vector icons. Here's how to use it to your advantage!","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/02\/CaTYINFUMAAI7_p.jpg","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/why-you-should-start-using-font-awesome\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/why-you-should-start-using-font-awesome\/","name":"Why you Should Start Using Font Awesome","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2015-09-29T16:00:35+00:00","dateModified":"2023-11-13T18:25:05+00:00","description":"Font Awesome is a robust icon set that contains scalable vector icons. Here's how to use it to your advantage!","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/why-you-should-start-using-font-awesome\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/why-you-should-start-using-font-awesome\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/why-you-should-start-using-font-awesome\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"Why you Should Start Using Font Awesome"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2015\/09\/fontawesome-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Developer","topic":"<strong>Topics:<\/strong> Design","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/13235"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139659"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139659"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139659"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}