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

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

На мой взгляд изящнее всего подключать символы шрифта именно средствами 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";		
	}

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

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

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

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