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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

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

Автор: Guy Routledge

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree