Статьи

Совет AtoZ CSS: как использовать символы Юникода

Октябрь 13, 2018

Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Вы можете просмотреть полную транскрипцию и скринкаст для unicode-range@font-faceздесь .

Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду изучать различные значения CSS (и свойства), каждое из которых начинается с другой буквы алфавита. Мы знаем, что иногда скринкастов недостаточно, поэтому в этой статье мы добавили краткие советы по использованию символов Юникода.

U1_b-01

U для символов Юникода

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

Установите набор символов в вашем CSS

Если вы хотите использовать символы Unicode в своем CSS-файле, убедитесь, что вы задали набор символов для своего CSS в дополнение к установке метатега charset 

 <!-- in your HTML <head> --> 
<meta charset= "utf-8"/>
 /* in your CSS at the top of the file*/
@charset 'utf-8';

Используйте символ Trigram for Heaven как простой значок гамбургера

Когда мне нужно собрать быстрый демонстрационный сайт или видео-ролик для адаптивного урока, я часто использую значок гамбургера «люби или ненавидь» для мобильного меню. Существует множество решений для значков, и существует множество нерастровых подходов к значку гамбургера, но часто для меня самым быстрым и простым является использование символа Юникод под названием «Триграмма для небес», который выглядит следующим образом: ☰

Это выглядит как значок гамбургера. И вот как я часто добавляю это в свою навигацию: 

 <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 .

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

37
Share: