{"id":66348,"date":"2016-03-15T10:44:40","date_gmt":"2016-03-15T14:44:40","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=66348"},"modified":"2017-07-31T09:51:20","modified_gmt":"2017-07-31T13:51:20","slug":"joomla-3-x-how-to-change-the-logo-icon-if-it-is-set-as-the-font-awesome-icon","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/joomla-3-x-how-to-change-the-logo-icon-if-it-is-set-as-the-font-awesome-icon.html","title":{"rendered":"Joomla 3.x. How to change the logo icon (if it is set as the Font Awesome icon)"},"content":{"rendered":"

Hello! This video tutorial shows how to change the logo icon<\/strong> in Joomla templates (if it is set as the Font Awesome icon<\/strong>).<\/p>\r\nJoomla 3.x. How to change the logo icon (if it is set as the Font Awesome icon)<\/a>\r\n

The logo in your Joomla template may be set as the iconic font icon<\/strong> and not as an image:<\/p>\r\n\r\n\"joomla_change_logo_icon_1\"<\/a>\r\n

Let’s learn how to change it.<\/p>\r\n

As you can see the logo consists of two parts<\/strong> – the icon<\/strong> itself and the logo text<\/strong>.<\/p>\r\n

Use the Firebug extension<\/strong> for Firefox or the Developer’s tool<\/strong> of your favorite browser to inspect the logo:<\/p>\r\n\r\n\"joomla_change_logo_icon_2\"<\/a>\r\n

As you can see the logo text is controlled by the module with the ID: 205<\/strong> – Single Article Module<\/strong>, which means there is an article in your admin panel where the text of the logo can be edited.<\/p>\r\n

Let’s change the logo text now.<\/p>\r\n

The tutorial assumes you are already logged into your Joomla administration panel.<\/p>\r\n

    \r\n\t
  1. \r\n\t\t

    Navigate to Content ->Article Manager<\/strong> tab:<\/p>\r\n\t\r\n\"joomla_change_logo_icon_3\"<\/a>\r\n\t<\/li>\r\n\t

  2. \r\n\t\t

    Use the CTRL+F\/CMND+F<\/strong> key (Windows OS\/Mac OS<\/strong>) to find the “logo”<\/strong> article.<\/p>\r\n\t<\/li>\r\n\t

  3. \r\n\t\t

    Now click on the article title to open it for editing – you will see the logo text at the appeared article editing interface:<\/p>\r\n\t\r\n\"joomla_change_logo_icon_4\"<\/a>\r\n\t<\/li>\r\n\t

  4. \r\n\t\t

    Change the logo text to the desired one and click green “Save”<\/strong> button at the upper left of the screen:<\/p>\r\n\r\n\"joomla_change_logo_icon_5\"<\/a>\r\n\t<\/li>\r\n<\/ol>\r\n

    Now that the logo text is changed, let’s replace the icon with your own one.<\/p>\r\n

    Navigate to your site front-end and get back to the Developer’s tool<\/strong> to inspect the logo.<\/p>\r\n

    The logo icon is set using the following CSS property<\/strong> in the template.css<\/strong> file:<\/p>\r\n

    content: "\\f030";<\/pre>\r\n
    Replace the icon code with the desired one from the Font Awesome snippet list<\/a>:<\/p>\r\n\r\n\"joomla_change_logo_icon_6\"<\/a>\r\n
    In case you would like to replace the icon with your own image\/icon<\/strong>, replace the previously mentioned CSS property with the following:<\/p>\r\n
    content: url("FULL_PATH_TO_YOUR_IMAGE_GOES_HERE");<\/pre>\r\n
    Where FULL_PATH_TO_YOUR_IMAGE_GOES_HERE<\/strong> text is the direct path<\/strong> to the desired image on your server, e.g. http:\/\/yoursite.com\/joomla\/images\/logo-image.png<\/strong><\/p>\r\n
    You may also change the red circle background color by editing the following CSS property:<\/p>\r\n
    border-color: #e74c3c;<\/pre>\r\n\r\n\"joomla_change_logo_icon_7\"<\/a>\r\n
    Make sure to save the template.css<\/strong> file after your finish editing and refresh the page to see changes.<\/p>\r\n
    You can see the logo icon has been successfully changed:<\/p>\r\n\r\n\"joomla_change_logo_icon_8\"<\/a>\r\n
    This is the end of the tutorial. You have learnt how to change the logo icon<\/strong> in your Joomla template (if it is set as the Font Awesome icon<\/strong>).<\/p>\r\n\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nJoomla 3.x. How to change the logo icon (if it is set as the Font Awesome icon)<\/a>\r\n\r\n
    \r\n\r\n\r\n<\/a>\r\n<\/div>","protected":false},"excerpt":{"rendered":"
    This video tutorial shows how to change the logo icon<\/strong> in Joomla templates (if it is set as the Font Awesome icon<\/strong>).<\/p>\n","protected":false},"author":68,"featured_media":66357,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[724],"tags":[2275,674,483,525],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/66348"}],"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\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=66348"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/66348\/revisions"}],"predecessor-version":[{"id":82354,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/66348\/revisions\/82354"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/66357"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=66348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=66348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=66348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}