Использование значений иконок Font Awesome
 | |
| Вашему вниманию полный список значения шрифта Awesome, который используется в CSS, где представлена таблица значения для иконочного шрифта. Вероятно большинству веб разработчикам знакомо значение Font Awesome, где для большинства стало отличным решение по смене иконок. Если ранее можно было только поставить изображением, и сделать его на 16 пикселей и больше, что терялась формация. То при установках значков все изменилось, только в хорошую сторону, ведь можно на сайте прописать стиль и потом на всем интернет ресурсе выставлять иконки. Что ранее мы изначально заходили на официальный сайт Font Awesome, где искали ту фигуру, которая нужна и копировали код под установку. Теперь можно поставить по другому, что также изначально прописывать стиль и под него уже не ставить код, а значение находится не в CSS. Изначально, чтоб полноценно использовать все блага от шрифта Font Awesome, то на интернет сайте нужно обязательно подключить стилистику, и вот как раз здесь есть несколько выборов, которые рассмотрим. Самый популярный, который идет автономным, это скачать с последующей загрузкой на сайт, где все кнопки находятся на сервис. Также можно сделать по прямому подключению из сервера CDNJS, что также большинство выставляют, ведь здесь автоматически идет обновление. Вообще не будет сильно внедрятся в установку, она понятна, если кому интересна, то в этой теме "Подключить иконки от Font Awesome на сайт" все подробно описано по подключению шрифтовых кнопок. Для того что бы подключить их из ресурса CDNJS, то прописываем в /head на странице, где применяете кнопки: Код <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> Как добавите, то теперь у вас появилась тема по размещению кнопок по всему сайту или на заданной странице. Если рассматривать сами шрифты, то по умолчанию ставят на заданную страницу html, где используется тег < i > для вывода. Код <i class="fa fa-etsy" aria-hidden="true"></i> Также есть вариант, чтоб добавить шрифт значка, прописав его в CSS, если добавить значение, что выше ставили, то это совершенно другой вариант и здесь выводить по такой вариаций не будет. Вот как раз здесь обязательно добавляем именно значение шрифта, которые вам будут представлены ниже, где под каждым значением идет именно заданная иконка для вывода. Как пример, вам нужно поставить значок в переде, то здесь добавляем иконку Awesome, ниже наведу пример как это делается: Код .element:before { content: "\f000"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color: #000; font-size: 18px; padding-right: 0.5em; position: absolute; top: 10px; left: 0; } А точнее произошло добавление:before к тому блоку, который вам нужен, где появился шрифт иконок font-family: FontAwesome; с тем самым значением кнопки content: "\f000"; что в принципе, как можно заметить не сложно. Что теперь значок отображается в переде, вообще там где изначально хотели его наблюдать. Также работаем по остальным значением, где только меняем на тот значок, который вам нужен в установке, где все остальные стили указанные здесь только для форматирования внешнего вида иконки. Вашему вниманию предоставлен полноценный список Awesome, где под каждый знак прописано значение, которое меняем на свое сайте. Безусловно здесь вы самостоятельно можете все увидеть в подключенном файле font-awesome.min.css, но согласитесь, так намного удобнее для выбора, где увеличены для быстрого поиска. Перейдя на страницу, там предоставлены знаки, где рядом с ними прописано значение его, что нам нужно. Выбираем нужную иконку с последствием значением, которое закреплено за знаком, где меняем в стиль. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |