От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе символами Юникода.
Полный видеоурок и его текстовую версию по unicode-range и @font-face можно найти здесь.
U значит символы Юникода
Символы Юникода очень полезны, с их помощью можно добавлять небольшие символы и иконки в HTML и CSS при помощи свойства content у псевдоэлементов. Вот пара советов по использованию символов Юникода.
Задавайте кодировку символов в CSS
Если вы хотите использовать символы Юникода в CSS файле, то помимо мета тега charset в HTML документе вам необходимо задать кодировку символов в CSS.
|
1 2 3 4 5 |
<!-- в HTML <head> --> <meta charset= "utf-8"/> /* в файле CSS в самом верху */ @charset 'utf-8'; |
Используйте символ триграммы для создания простой иконки-гамбургера
Если мне нужно по-быстрому создать демо сайт или видеоурок по адаптивности, нравится вам это или нет, но я зачастую использую иконку-гамбургер для мобильного меню. В сети полно способов создания этой иконки, причем без использования растровых изображений. Однако очень часто самый быстрый и легкий способ для меня – использовать символ Юникода триграмм, который выглядит вот так ☰.
Он выглядит, как иконка-гамбургер. Вот так я зачастую добавляю эту иконку в меню:
|
1 2 3 4 5 6 7 8 9 10 |
<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
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
