Форум PHP программистов > Работа с картиками из шрифта.

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Работа с картиками из шрифта.

Dima85

5.01.2015 - 19:54

Хочу попробовать использовать вот такие иконки:
http://fortawesome.github.io/Font-Awesome/3.2.1/examples/

Добавляются они на сайт таким образом:

<i class="icon-camera-retro"></i>

В моем же случае нужно добавить иконку icon-camera-retro в тег <li> перед текстом

<ul id="menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

HTML код менять нельзя. Можно только CSS.
Простую картинку я бы добавил так:

#menu li {
    background: url("/images.gif") no-repeat scroll 0px transparent;
}

Можно ли похожим способом подгрузить и иконки с шрифта?

volter9

5.01.2015 - 23:54

Цитата (Dima85 @ 5.01.2015 - 19:54)

<i class="icon-camera-retro"></i>

В моем же случае нужно добавить иконку icon-camera-retro в тег <li> перед текстом

<ul id="menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

HTML код менять нельзя. Можно только CSS.
Простую картинку я бы добавил так:

#menu li {
    background: url("/images.gif") no-repeat scroll 0px transparent;
}

Можно ли похожим способом подгрузить и иконки с шрифта?

Если использовать SCSS и исходники Font-Awesome то это можно наследством сделать:

/* Импорт font-awesome, Вам надо скачать исходники здесь: https://github.com/FortAwesome/Font-Awesome/tree/v4.2.0 папка scss/ */
@import 'font-awesome';

/**
 * Внимание!: Font-Awesome иконки нельзя использовать как background 
 * Как я понял Вам нужно использовать иконки как замена list-style
 */
#menu li:before {
    @extend .fa, .fa-camera-retro;
}

_____________
Мой блог

Быстрый ответ:

Здесь расположена полная версия этой страницы.