If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

JS Animated. How to replace the Awesome Font logo with the image

This tutorial shows how to replace the Awesome Font logo with the image in JS Animated templates.

JS Animated. How to replace the Awesome Font logo with the image

Here is the Font Awesome icon that needs to be replaced with the jpg image:

JS Animated. How to replace the Awesome Font logo with the image1

In order to replace it with an image, you should do the following:

  1. Right click the icon to inspect it with the Mozilla Firebug Tool.

    Please refer to these tutorials for more details on working with the Firebug Tool:

    Firebug – Mozilla Firefox Plugin

    Firebug: How to determine a file with needed code.

  2. Upload the image you would like to replace the icon with to any location on the server, i.e. the ‘images’ directory.

    In order to do this, you should log into your FTP account using the Filezilla software or the File Manager in your Hosting Cpanel, navigate to the ‘images’ folder, click ‘Upload’, select the jpg image to upload from your PC or drag-n-drop 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.

  3. Refer to the Firebug tool to determine the file where the icon code is located and the line number for the code:

    JS Animated. How to replace the Awesome Font logo with the image2

  4. Via the File Manager open the file mentioned in Firebug and scroll to the line specified:

    JS Animated. How to replace the Awesome Font logo with the image3

  5. Replace the Font Awesome code with the full link to the image on your FTP.

    The code should be added in the following format:

    content: url("http://yourdomain.com/images/yourimage.jpg");

    where http://yourdomain.com/images/yourimage.jpg is the direct path to the image on the server:

    JS Animated. How to replace the Awesome Font logo with the image4

  6. Do not forget to click ‘Save’ in order to save the changes to the file.

As you can see the Font Awesome icon has been replaced with the jpg image on the site:

JS Animated. How to replace the Awesome Font logo with the image5

Feel free to check the detailed video tutorial below:

JS Animated. How to replace the Awesome Font logo with the image