{"id":13230,"date":"2015-09-30T13:00:16","date_gmt":"2015-09-30T18:00:16","guid":{"rendered":"https:\/\/getflywheel.com\/?p=13230"},"modified":"2024-09-29T13:05:11","modified_gmt":"2024-09-29T18:05:11","slug":"how-to-add-font-awesome-to-your-wordpress-site","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-font-awesome-to-your-wordpress-site\/","title":{"rendered":"Integrating Font Awesome With Your WordPress Site"},"content":{"rendered":"\n

Font Awesome<\/a> is a robust font and icon library that’s great for designers of all skill levels. <\/p>\n\n\n\n

If you’re ready to add Font Awesome your WordPress site, you have a few options\u2014do you want to include files internally, or externally? The biggest thing is to make sure the font reliably loads and can be referenced at all times. If you choose to include the files internally you can load and link to the file path, when externally you\u2019ll be linking to an external stylesheet. Let’s dive into how to add Font Awesome<\/a> to your website.<\/p>\n\n\n\n\n\n

\"How
The example on the left shows the icons loading correctly. If the fonts are not included or if the link to the stylesheet is not included correctly, the icon will not show up.<\/figcaption><\/figure>\n\n\n\n

No matter which option you choose, it\u2019s important to remember that you need both the font and CSS files to make things work, so if you\u2019re installing things manually, be sure to double check that you have both.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Download Font Awesome and include the fonts\/CSS manually<\/h3>\n\n\n\n

If you choose to go the local route, there are a couple options to consider.<\/p>\n\n\n\n

First, to access the files, visit the Font Awesome website. Click the download link and get the .zip file from their homepage. When you open the .zip file, you\u2019ll see the fonts and CSS files for your project.<\/p>\n\n\n\n

Using the Font Awesome local copy in your child theme<\/h3>\n\n\n\n

Is Font Awesome specific to your theme? If so, there are a couple of ways to add it to your child theme.<\/p>\n\n\n\n

Adding Font Awesome files to the header<\/h3>\n\n\n\n

The header.php file is where the stylesheet link will go, and should be located between the opening and closing <head><\/code> tags. Before adding the file path information, make sure you have all the needed Font Awesome files.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Font files should be added to the font directory.Look for the <head><\/code> tag in the header.php<\/code> file and then paste the path to the font-awesome.min.css<\/code> file, it should look something like this:<\/p>\n\n\n\n

&lt;link rel=\"stylesheet\" href=\"youropotionalfolder\/font-awesome\/css\/font-awesome.min.css\"&gt;<\/code><\/pre>\n\n\n\n
Add Font Awesome to the functions file<\/h3>\n\n\n\n
If you\u2019d rather add this to the functions.php<\/code> file, it can easily be done. Some designers prefer to keep all customizations in one place, and this is a great way to do that.<\/p>\n\n\n\n
function add_font_awesome()\n{\nwp_enqueue_style( 'style', get_stylesheet_uri() );\nwp_enqueue_style( 'font-awesome', get_template_directory_uri().'youropotionalfolder\/font-awesome\/css\/font-awesome.min.css' );\n}\nadd_action( 'wp_enqueue_scripts', 'add_font_awesome' )<\/code><\/pre>\n\n\n\n
Like the example above, be sure to double check the path to the CSS file. If this path is not correct, the font will not work.<\/p>\n\n\n\n
Use an external copy of Font Awesome<\/h3>\n\n\n\n
The same options apply when using an external copy, it\u2019s just the path to the Font Awesome file that differs.<\/p>\n\n\n\n
Adding to the header<\/h3>\n\n\n\n
The header.php<\/code> file is where we will put a link to the hosted Font Awesome files. It\u2019s pretty easy; all it takes is a copy and paste.<\/p>\n\n\n\n
Look for the <head><\/code> tag in the header.php<\/code> file and then paste this in the head:<\/p>\n\n\n\n
link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.4.0\/css\/font-awesome.min.css\"&gt;<\/code><\/pre>\n\n\n\n
Enqueue in the functions file<\/h3>\n\n\n\n
Or, better yet, use the wp_enqueue_style<\/code> function. To load Font Awesome, add the following in child theme\u2019s functions.php<\/code>:<\/p>\n\n\n\n
add_action( 'wp_enqueue_scripts', 'add_font_awesome' );\n\nfunction add_font_awesome() {\nwp_enqueue_style( 'font-awesome', '\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.4.0\/css\/font-awesome.min.css\n\n' );\n}<\/code><\/pre>\n\n\n\n
Font Awesome plugin options<\/h3>\n\n\n\n
There are a few existing plugins available that take care of the installation for you. This specific example, Better Font Awesome, also looks for updates. Because it uses the CDN, it will be up to date. Like you would with all new plugins, it\u2019s a good idea to test it in a test environment first just to make sure it works as intended.<\/p>\n\n\n\n
Not finding the perfect plugin? You may want to write your own plugin that you can use on multiple projects and across multiple themes.<\/p>\n\n\n\n
Using Sass or LESS with Font Awesome<\/h3>\n\n\n\n
Are you a fan of preprocessors? If so, these will help you utilize Font Awesome. To work with the files, you\u2019ll need to download and put the font-awesome folder into your project’s root.<\/p>\n\n\n\n
If you\u2019re using Less, open your project’s font-awesome\/less\/variables.less<\/code>. If you\u2019re using Sass, you\u2019ll be making changes to the font-awesome\/scss\/_variables.scss<\/code> file. Open and edit the @fa-font-path<\/code> variable so it points to the correct directory, which is something like $fa-font-path: \"fonts\";<\/code> Once you recompile,  you can then test out the changes.<\/p>\n\n\n\n
Resources<\/h3>\n\n\n\n
It\u2019s easy to see why Font Awesome is so widely used. With easy setup, designers have a wide variety of icons available which are easy to customize and add to the web.<\/p>\n\n\n\n
Get more great icons<\/a> from the creators of Font Awesome, and visit WP Engine<\/a> to get the best hosting for your WordPress sites<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"
Font Awesome is a robust font and icon library that’s great for designers of all skill levels. If you’re ready to add Font Awesome your WordPress site, you have a few options\u2014do you want to include files internally, or externally? The biggest thing is to make sure the font reliably loads and can be referenced…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":140424,"template":"","resource-topic":[1396],"resource-role":[1397,899],"resource-type":[916],"class_list":["post-13230","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nImplementing Font Awesome in WordPress: An Easy Guide<\/title>\n<meta name=\"description\" content=\"Boost your design with Font Awesome, a rich library of pre-created icons, perfect for enhancing your WordPress site aesthetics and user experience.\" \/>\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=\"Implementing Font Awesome in WordPress: An Easy Guide\" \/>\n<meta property=\"og:description\" content=\"Boost your design with Font Awesome, a rich library of pre-created icons, perfect for enhancing your WordPress site aesthetics and user experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-font-awesome-to-your-wordpress-site\/\" \/>\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=\"2024-09-29T18:05:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2015\/09\/font-awesome-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 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\/how-to-add-font-awesome-to-your-wordpress-site\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-font-awesome-to-your-wordpress-site\/\",\"name\":\"Implementing Font Awesome in WordPress: An Easy Guide\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2015-09-30T18:00:16+00:00\",\"dateModified\":\"2024-09-29T18:05:11+00:00\",\"description\":\"Boost your design with Font Awesome, a rich library of pre-created icons, perfect for enhancing your WordPress site aesthetics and user experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-font-awesome-to-your-wordpress-site\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-font-awesome-to-your-wordpress-site\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-font-awesome-to-your-wordpress-site\/#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\":\"Integrating Font Awesome With Your WordPress Site\"}]},{\"@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":"Implementing Font Awesome in WordPress: An Easy Guide","description":"Boost your design with Font Awesome, a rich library of pre-created icons, perfect for enhancing your WordPress site aesthetics and user experience.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Implementing Font Awesome in WordPress: An Easy Guide","og_description":"Boost your design with Font Awesome, a rich library of pre-created icons, perfect for enhancing your WordPress site aesthetics and user experience.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-font-awesome-to-your-wordpress-site\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-09-29T18:05:11+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2015\/09\/font-awesome-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-font-awesome-to-your-wordpress-site\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-font-awesome-to-your-wordpress-site\/","name":"Implementing Font Awesome in WordPress: An Easy Guide","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2015-09-30T18:00:16+00:00","dateModified":"2024-09-29T18:05:11+00:00","description":"Boost your design with Font Awesome, a rich library of pre-created icons, perfect for enhancing your WordPress site aesthetics and user experience.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-font-awesome-to-your-wordpress-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-font-awesome-to-your-wordpress-site\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-font-awesome-to-your-wordpress-site\/#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":"Integrating Font Awesome With Your WordPress Site"}]},{"@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\/font-awesome-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Site Owner","topic":"<strong>Topics:<\/strong> Design","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/13230","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\/140424"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=13230"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=13230"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=13230"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=13230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}