Отображение иконок шрифта средствами только css.

Отображение символов шрифта средствами css.

платим 200р+ за cpm
Content Protection by DMCA.com

На мой взгляд изящнее всего подключать символы шрифта именно средствами css, без встраивания в код html. Предположим вы используете в своем дизайне Font Awesome или любой другой шрифт, но я буду описывать именно на его примере.

Для выполнения данной задачи нам потребуется знать юникод подключаемого символа. У Font Awesome его можно узнать кликнув по необходимой иконке и перейдя на страницу с подробной информацией о ней прочитать в строке после слова…

Unicode: f215

В данном случае юникодом этой иконки является номер f215

И так, приступим к практической части.

У нас есть классы к которые должны отображаться на странице иконками:


<section class="css-icons">
<div class="robots"></div>
<div class="love"></div>
<div class="css"></div>
</section>

Все что нужно сделать, указать название шрифта который используется и присвоить необходимому классу псевдоэлемент after предназначенный для вывода контента после содержимого элемента к которому он будет добавлен. Или использовать псевдоэлемент before, то же самое с разницей вывода перед содержимым элемента, кому как нравится.

Вот таким образом:


.robots::after {
font-family:'FontAwesome';
content:"\f215";
}
.love::after {
font-family:'FontAwesome';
content:"\f004";
}
.css::after {
font-family:'FontAwesome';
content:"\f13c";		
}

Как видите, перед юникодом необходим обратный слеш.

Content Protection by DMCA.com

Записи с такими же тегами:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *