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

Featured templates

JS Animated. How to replace font icons with images

This tutorial will show you how to replace iconic font icon with the image in JS Animated templates.

JS Animated. How to replace Font icons with images

You can see such icons below:

JS_Animated-How_to_replace_iconic_font_icon_with_the_image-1

  1. First, we will upload a new image to the server. Log into File Manager, get to the root directory of your site. Open images folder:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-2

    Click Upload button to upload the image from your computer:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-3

    We can see the new uploaded image here:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-4

    The URL for this image will be as follows: site-url/path-to-the-image/image-name.file-type

    In this case, it’s: http://templatetesting.com/elina/site/images/downarrow.png

  2. Next, look for the css code of the icon. Inspect the element with browser developer tool. It’s firebug in this case:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-5

    You will see the css code for this icon:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-6

    We will change the content icon with the URL of the newly uploaded image. Type:

    			content: url("url-of-the-uploaded-image") !important;
    		

    for this icon class.

    Copy this rule:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-7

    Go back to the root directory, open “css” folder:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-8

    Click on style.css file to edit:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-9

    Add the code to the bottom of style.css file and Save it:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-10

    Refresh the site to see the new image:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-11

Feel free to check the detailed video tutorial below:

JS Animated. How to replace Font icons with images