Если данный туториал не то, что Вы искали, у Вас все еще остались вопросы или предложения - дайте нам знать. Пожалуйста, помогите нам обслуживать Вас лучше!

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Новые шаблоны

JS Animated. Как заменить Шрифтовые значки изображениями

Из этого туториала Вы узнаете, как заменить шрифтовой значок изображением в JS-анимированных шаблонах.

JS Animated. Как заменить Шрифтовые значки изображениями

Ниже Вы можете ознакомиться с примером значка:

JS_Animated-How_to_replace_iconic_font_icon_with_the_image-1

  1. Во-первых, загрузите новое изображение на сервер. Войдите в Файловый менеджер (File Manager), для того чтобы получить доступ к корневой папке вашего сайта. Откройте папку images:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-2

    Нажмите на кнопку Загрузить (Upload), для того чтобы загрузить изображение с вашего компьютера:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-3

    Вы можете видеть новое загруженное изображение:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-4

    Ссылка на это изображение будет выглядеть следующим образом: site-url/path-to-the-image/image-name.file-type

    В нашем случае, это: http://templatetesting.com/elina/site/images/downarrow.png

  2. Далее, найдите код css значка. Исследуйте элемент, используя Инструмент разработчика в вашем браузере. Мы используем firebug:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-5

    Вы увидите код css значка:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-6

    Замените значение атрибута «content» на ссылку на загруженное изображение. Введите:

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

    для класса этого значка.

    Скопируйте правило:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-7

    Вернитесь в корневую папку вашего сайта, откройте папку «css«:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-8

    Нажмите на файл style.css для внесения изменений:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-9

    Добавьте код в конец файла style.css и Сохраните (Save) его:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-10

    Обновите сайт для просмотра нового изображения:

    JS_Animated-How_to_replace_iconic_font_icon_with_the_image-11

Вы можете также ознакомиться с детальным видео-туториалом ниже:

JS Animated. Как заменить Шрифтовые значки изображениями