{"id":59797,"date":"2016-01-13T08:54:46","date_gmt":"2016-01-13T13:54:46","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=59797"},"modified":"2016-03-01T04:52:27","modified_gmt":"2016-03-01T09:52:27","slug":"js-animated-how-to-replace-the-awesome-font-logo-with-the-image","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-how-to-replace-the-awesome-font-logo-with-the-image.html","title":{"rendered":"JS Animated. How to replace the Awesome Font logo with the image"},"content":{"rendered":"

This tutorial shows how to replace the Awesome Font logo with the image<\/strong> in JS Animated templates.<\/p>\r\nJS Animated. How to replace the Awesome Font logo with the image<\/a>\r\n

Here is the Font Awesome icon<\/strong> that needs to be replaced with the jpg image:<\/p>\r\n\r\n\"JS<\/a>\r\n

In order to replace it with an image, you should do the following:<\/p>\r\n

    \r\n\t

  1. Right click<\/strong> the icon to inspect it with the Mozilla Firebug Tool<\/strong>.<\/p>\r\n\t\t

    Please refer to these tutorials<\/strong> for more details on working with the Firebug Tool<\/strong>:<\/p>\r\n\t\t

    Firebug – Mozilla Firefox Plugin<\/a><\/p>\t\r\n\t

    Firebug: How to determine a file with needed code.<\/a><\/p><\/li>\r\n

  2. Upload the image<\/strong> you would like to replace the icon with to any location on the server, i.e. the ‘images’<\/strong> directory.<\/p>\r\n

    In order to do this, you should log into your FTP account using the Filezilla software<\/strong> or the File Manager<\/strong> in your Hosting Cpanel, navigate to the ‘images’<\/strong> folder, click ‘Upload’<\/strong>, select<\/strong> the jpg image to upload from your PC or drag-n-drop<\/strong> the image from your PC to the image folder using Filezilla. Please refer to this tutorial to learn how to upload files to the server.<\/a><\/p><\/li>\r\n

  3. Refer to the Firebug tool to determine the file where the icon code<\/strong> is located and the line number<\/strong> for the code:<\/p>\r\n\r\n\"JS<\/a>\r\n<\/li>\r\n

  4. Via the File Manager open the file mentioned in Firebug<\/strong> and scroll to the line specified: <\/p>\r\n\r\n\"JS<\/a>\r\n<\/li>\r\n

  5. Replace the Font Awesome code<\/strong> with the full link to the image<\/strong> on your FTP.<\/p>\r\n\t

    The code should be added in the following format<\/strong>:<\/p>\r\n\t

    content: url("http:\/\/yourdomain.com\/images\/yourimage.jpg");<\/pre>\r\n
    where http:\/\/yourdomain.com\/images\/yourimage.jpg is the direct path to the image on the server<\/strong>:<\/p>\r\n\r\n\"JS<\/a>\r\n<\/li>\r\n
  6. \r\n
    Do not forget to click ‘Save’<\/strong> in order to save the changes to the file.<\/p><\/li>\r\n<\/ol>\r\n
    \r\nAs you can see the Font Awesome icon has been replaced with the jpg image on the site:<\/p>\r\n\r\n\"JS<\/a>\r\n\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nJS Animated. How to replace the Awesome Font logo with the image<\/a>","protected":false},"excerpt":{"rendered":"
    This tutorial shows how to replace the Awesome Font logo with the image<\/strong> in JS Animated templates.<\/p>\n","protected":false},"author":62,"featured_media":59803,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[1761,2411,537,525],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/59797"}],"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\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=59797"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/59797\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/59803"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=59797"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=59797"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=59797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}