{"id":52317,"date":"2015-08-18T04:51:24","date_gmt":"2015-08-18T08:51:24","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=52317"},"modified":"2017-07-25T11:00:47","modified_gmt":"2017-07-25T15:00:47","slug":"joomla-3-x-how-to-add-missing-fontawesome-icons","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/joomla-3-x-how-to-add-missing-fontawesome-icons.html","title":{"rendered":"Joomla 3.x. How to add missing FontAwesome icons"},"content":{"rendered":"

\r\n

This tutorial shows how to add missing FontAwesome icons<\/strong> in Joomla 3.x.<\/p>\r\n

Joomla 3.x. How to add missing FontAwesome icons<\/a><\/p>\r\n

Icons are missing when new version of FontAwesome icons was released or when designer adds only the icons used for dummy content.<\/p>\r\n

When icon is added in Joomla admin panel<\/strong> but it’s still missing on front-end, you will need to add icon unicode into CSS file of the template:<\/p>\r\n

\"Joomla<\/a><\/p>\r\n

    \r\n
  1. \r\n

    Connect to server via FTP<\/a> or open cPanel file manager<\/a> and find the templates\/themeXXX\/css\/template.css<\/strong> file.\r\n <\/p>\r\n<\/li>\r\n

  2. \r\n

    Find the last FontAwesome icon code in template.css, that’s the place where you will be adding new icons, e.g. fa-comments icon:<\/p>\r\n

    \"Joomla<\/a><\/p>\r\n

    We strongly recommend saving the template.css backup before editing it.<\/p>\r\n<\/li>\r\n

  3. \r\n

    Next, open the templates\/themeXXX\/less\/font-awesome\/font-awesome.css<\/strong> file, find the last element of icons list from the template.css file in the file you’ve opened. Copy all the code under it (fa-comments in our case) and paste code at the bottom of template.css.<\/p>\r\n<\/li>\r\n

  4. \r\n

    Save changes. You can see that icon is displayed now:\r\n <\/p>\r\n

    \"Joomla<\/a>\r\n <\/li>\r\n

  5. \r\n

    In case for some reasons the font-awesome.css file is missing in the template, open the css source file on FontAwesome offical site<\/a> and copy code from the maxcdn.bootstrapcdn.com\/font-awesome\/4.4.0\/css\/font-awesome.min.css<\/strong> file at the bottom of template.css.<\/p>\r\n<\/li>\r\n<\/ol>\r\n

    Feel free to check the detailed video tutorial below:<\/p>\r\n

    Joomla 3.x. How to add missing FontAwesome icons<\/a><\/p>\r\n

    <\/p>\r\n

    \r\n\r\n\r\n<\/a>","protected":false},"excerpt":{"rendered":"

    This tutorial shows how to add missing FontAwesome icons<\/strong> in Joomla 3.x.<\/p>\n","protected":false},"author":65,"featured_media":52323,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[724],"tags":[1761,674,483,777],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/52317"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=52317"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/52317\/revisions"}],"predecessor-version":[{"id":82248,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/52317\/revisions\/82248"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/52323"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=52317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=52317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=52317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}