CSS от А до Я: как использовать символы Юникода

CSS от А до Я: как использовать символы Юникода

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе символами Юникода.

Полный видеоурок и его текстовую версию по unicode-range и @font-face можно найти здесь.

U значит символы Юникода

Символы Юникода очень полезны, с их помощью можно добавлять небольшие символы и иконки в HTML и CSS при помощи свойства content у псевдоэлементов. Вот пара советов по использованию символов Юникода.

Задавайте кодировку символов в CSS

Если вы хотите использовать символы Юникода в CSS файле, то помимо мета тега charset в HTML документе вам необходимо задать кодировку символов в CSS.

<!-- в HTML <head> --> 
<meta charset= "utf-8"/>

/* в файле CSS в самом верху */
@charset 'utf-8';

Используйте символ триграммы для создания простой иконки-гамбургера

Если мне нужно по-быстрому создать демо сайт или видеоурок по адаптивности, нравится вам это или нет, но я зачастую использую иконку-гамбургер для мобильного меню. В сети полно способов создания этой иконки, причем без использования растровых изображений. Однако очень часто самый быстрый и легкий способ для меня – использовать символ Юникода триграмм, который выглядит вот так ☰.

Он выглядит, как иконка-гамбургер. Вот так я зачастую добавляю эту иконку в меню:

<nav class="site-nav"> 
  <ul class="site-nav-menu"> 
    <li><a href= "#">lorem ipsum</a></li> 
    <li><a href= "#">lorem ipsum</a></li> 
    <li><a href= "#">lorem ipsum</a></li> 
    <li><a href= "#">lorem ipsum</a></li> 
    <li><a href= "#">lorem ipsum</a></li> 
  </ul> 
  <a href="#" class="site-nav-icon">☰</a> 
</nav>

Быстро находите и копируйте символы Юникода

Я нашел иконку-гамбургер, когда искал символы Юникода в библиотеке на copypastecharacter.com. У них есть целый набор стрелок, графических форм, математических символов, знаков пунктуации и несколько странных и уникальных в своем роде символов. Вы можете с легкостью копировать их и вставлять в свой код. Очень удобный сайт.

Автор: Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree