Украшаем дизайн сайта с помощью иконок Font Awesome — Константин Хмелев
Здравствуйте, друзья.
Сегодня новая статья из рубрики «Дизайн».
Кто следит за моим блогом знают, что пару дней назад я обновил дизайн блога. Так вот, все иконки, которые вы видите напротив пунктов меню и рубрик, а также в некоторых заголовках, например, во вкладках между переключением популярных и обсуждаемых записей, возле заголовка похожих статей в конце текста и возле заголовка количества комментариев, это все не картинки, а специальный шрифт Font Awesome, с помощью которого можно без проблем делать хорошие качественные иконки.
Тоже самое касается и маленьких иконок возле количества комментариев, даты, количества просмотров.
И в большинстве случаев это сделать намного проще, чем каждый раз прописывать стили и выводить картинку. Также не приходится прописывать дополнительные стили по выравниванию, цвету и так далее, так как иконки выводятся шрифтом и совпадают с общими стилями того блока, куда их разместили.
В общем, штука очень крутая. Я когда делал свои первые заказы, столкнулся с этими иконками и мне они доставили очень много неудобств. Я просто не знал, как ими пользоваться, и в некоторых случаях просто заменял эти иконки на изображения. Сейчас же я не вижу в их использовании абсолютно никаких проблем. Достаточно подключить шрифт Font Awesome к сайту, а затем в нужное место добавить код вывода иконки. Очень просто, давайте рассмотрим на практике.
СодержаниеПоказать
Как подключить иконки Font Awesome к сайту
Существует 2 способа подключения:
- Подключить библиотеку иконок с самого сервиса, т.е. прописать путь к файлу иконок на стороне облачного хранилища, где сервис его хранит. В этом случае каждый раз при загрузке страницы будет грузиться и данный файл. Изначально у меня стоял такой вариант, но потом я заметил, что он достаточно сильно замедляет загрузку страниц. Именно поэтому я перешел на второй вариант.
- Скачать файл иконок Font Awesome с официального сайта и подключить его в шаблон, как и обычный файл стилей. Работа сайта становится заметно быстрее.
Рассмотрим оба варианта более подробно.
Вариант 1
Заходим на [urlspan]официальный сайт Font Awesome[/urlspan] и берем строку кода подключения загрузки файла с облачного хранилища. Строка будет в первом пункте страницы, также ее я продублировал ниже.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Вставляем ее на свой сайт между областямитут вставляем. Если у вас сайт на WordPress, то данная область находится в файле Header.php.
На этом подключение закончено. Остается только [urlspan]зайти на эту страницу[/urlspan] и выбрать подходящую иконку. Жмем на понравившуюся иконку и попадаем на страницу с вариантами различных размеров иконок, чтобы вы понимали, как она будет выглядеть при разных размерах шрифта. Также там будет и код, который будет выводить иконку.
Этот код вставляем в любое место, где хотим отобразить иконку.
[box]
Замечу, что такой метод вставки не работает в названии виджетов WordPress. Если просто вставить перед фразой код иконки, то он будет пропадать оттуда. Поэтому нужно использовать другой метод с помощью Jquery, о котором я сделаю следующую статью Там тоже все очень просто.
[/box]
Необходимо размещать код в файлах шаблона или в каких-то текстовых элементах. Например, в текстовом виджете в самом поле ввода содержимого, иконки работают. Таким образом у меня работает виджет популярных и обсуждаемых записей. Остальные же иконки прописаны в верстке, как самого шаблона, так и плагинов.
Вариант 2
Скачиваем папку с файлами [urlspan]отсюда[/urlspan].
Далее заходим в скачанный архив и углубляемся внутрь пока не будут видны все папки библиотеки.
Загружаем все файлы в корень темы ко всем папкам и файлам. Я не углублялся, нужно ли загружать только один конкретный файл или все папки, поэтому загрухил все, что было внутри архива.
Далее нужно подключить файл font-awesome.min.css, лежащий в папке CSS. Используем следующую строку, в ней только пропишите свой путь (домен и название темы). Размещаем ее по аналогии, как и с первым вариантом — в шапку сайта.
<link rel="stylesheet" href="http://ваш домен/wp-content/themes/название папки с темой/css/font-awesome.min.css">
Далее аналогичным образом ищем понравившуюся иконку и вставляем ее в нужные места шаблона.
Вот такой простой, но крайне полезный материал ля тех, кто любит что-то поделать с дизайном своего сайта. Незачем теперь использовать изображения, уменьшать их в фотошопе, обрезать и так далее. Достаточно подключить шрифт Font Awesome и использовать его возможности.
Изменение цвета иконок
Если же вам необходимо изменить цвет иконок, то это также вполне реально и не составит труда. У каждой иконки имеет общий класс (.fa) и индивидуальный класс с названием иконки. На примере выше с иконкой карандаша индивидуальный класс следующий:
fa-pencil-square-oЕсли хотите данной иконке задать конкретный цвет, тогда добавляем данный класс в свой файл стилей и внутри него пишем цвет, а также размер, стиль шрифта и дргие стили по вашему желанию. Нюанс заключается в том, что иконка выводится в псевдоэлементе before, поэтому именно ему и нужно прописывать стили. Например:
.fa-pencil-square-o:before{
color: #111; /*черный цвет*/
font-size:12px /*размер иконки 12 пикселей в ширину и высоту*/
}
Аналогично можно прописать оформление и для всех иконок Font Awesome, если нет нужды делать каждую индивидуально. Например, получится:
.fa:before{
color: #111; /*черный цвет*/
font-size:12px /*размер иконки 12 пикселей в ширину и высоту*/
}
Иногда имеет смысл делать такое оформление, чтобы иконки выглядели как-то по своему и делали общий дизайн сайта более разнообразным и качественным. Сразу будет видно, что оформление сделано не на коленке.
На этом сей материал я заканчиваю. Надеюсь, что он вам будет полезен. Тема актуальная. Лично я теперь использую такие иконки на всех сайтах. Стараюсь избавляться от всех картинок, и делать все максимально чисто и просто.
А вы используете иконки и слышали ли о них? Если нужна будет помощь, то обязательно пишите свои вопросы в комментариях.
Пока.
С уважением, Константин Хмелев!
Как подключить и использовать Font Awesome 5. Полное руководство.
Доброго времени суток, читатели моего блога! Мне постоянно поступает масса вопросов по шрифту Font Awesome – «Как подключить Font Awesome?», «Как его использовать на сайте или в Photoshop?», «Почему отображаются вместо иконок квадратики?» и тому подобные. И я решил сделать подробное руководство по Font Awesome 5, в котором вы найдете ответы на все эти вопросы.
Как подключить Font Awesome
В этой главе мы подробно разберемся как подключить Font Awesome 5 всеми возможными способами. И какой из них лучше выбрать.
Подключение с помощью CDN
Чтобы подключить иконочный шрифт Font Awesome 5 с помощью CDN необходимо перейти на
страницу: Font Awesome
Start и выставить необходимые параметры.
Полученный код вставляем в тег <head> вашего сайта, на тех
страницах где вы собираетесь использовать иконки.
На скриншоте №1 изображены настройки, которые я использую.
- Выбираем версию, которая нам нужна. Free — бесплатная версия. Pro — платная и имеет дополнительные стили и наборы иконок.
- Начертание шрифта, которое мы будем использовать в своем проекте.
- Что мы будем использовать. Webfont — иконочный шрифт. SVG — иконки в формате .svg
- Сгенерированный код для подключения Font Awesome с помощью CDN.
Чтобы не переходить на сайт, я размещу код со стандартными настройками здесь.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
Подключить Font Awesome с помощью CDN очень просто. Ведь вам нужно разместить всего лишь одну строчку кода в свой проект и все будет работать. Файлы будут храниться на сервере разработчиков. Но я предпочитаю хранить все на своем хостинге, так как я точно могу быть уверен, что все будет работать корректно и никакие изменения и обновления со стороны разработчика шрифта не затронут мой проект.
Подключение Font Awesome 5 с хранением файлов на своем хостинге (CSS)
Для начала нужно скачать файлы Font Awesome и разместить их на свой хостинг. Для этого переходим по этой ссылке https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself или скачиваем по прямой ссылке.
После скачивания получаем архив с файлами, как на скриншоте №2:
Скриншот №2
Для работы иконочного шрифта необходимы только папки выделенные красным. И то в паке /CSS нам нужен только один файл css/all.min.css (Смотрите скриншот №3)
Скриншот №3
Файл all.min.css
.min в названии файла показывает, что файл сжат, то есть убраны лишние пробелы и переносы. Это увеличивает скорость обработки этого файла, но если вы собираетесь его редактировать, что я вам делать не рекомендую, то удобней использовать файл без .min
Переносим папку webfont и файл all.min.css на свой хостинг.
Очень важно! Папка
У меня это выглядит так:
Скриншот №4
В папке fontawesome хранится один файл all.min.css
Теперь нам нужно подключить Font Awesome к своему сайту, для этого подключаем стили all.min.css, так как вы обычно подключаете файлы со стилями. Этот процесс я описывать не буду, так как он имеет огромное количество вариантов и каждый делает это по-своему. Но если вы новичок и не знаете, как подключать файлы со стилями, то Google вам в помощь. При возникновении трудностей пишите в комментариях, и я обязательно вам помогу.
Как использовать Font Awesome
В этой части статьи мы разберем как правильно использовать Font Awesome в веб-разработке или дизайне на примере Photoshop.
Как использовать Font Awesome в HTML
Это самый простой способ использования иконочного шрифта. Достаточно выбрать из каталога иконок Font Awesome нужную иконку и вставить ее код в нужное место вашего html документа. На скриншоте № 5 под цифрой 1 изображено место откуда можно узнать код иконки.
Скриншот №5
Как использовать Font Awesome в псевдоэлементах after и before CSS. Параметр content.
Чтобы использовать иконочный шрифт для его отображение в псевдоэлементах after или before, нужно использовать Unicode иконки. Который можно взять на странице с нужной иконкой (на скриншоте №5 цифра 2)
Теперь пишем стили css для элемента before или after:
div::after{
display: block;
content: '\f17b';
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
width: 100px;
height: 100px;
}
Разберем главные моменты в коде.
3. В свойстве content указываем Unicode.
4. Обязательно задаем семейства шрифта. Обратите внимание у Font Awesome 5 используется 2 шрифта «Font Awesome 5 Brands» и «Font Awesome 5 Free». В избежании ошибки указывайте оба.
5. Font-weight — обязательно нужно указывать 900, иначе иконки будут отображаться в виде квадратиков. Другая толщина доступна только в PRO версии.
Как использовать шрифт Font Awesome в Photoshop
Для того, чтобы использовать иконочный шрифт в фотошопе необходимо установить шрифт на свой компьютер. Они находятся в папке webfont в архиве Font Awesome. Для установки нужно кликнуть правой кнопкой мыши на нужный шрифт и нажать «Установить».
Смотрите на скриншоте №6:
Скриншот №6
После установки можно использовать Font Awesome в фотошопе, для этого мы копируем необходимую нам иконку с каталога (цифра 3 на скриншоте №5) и вставляем в photoshop как текст. Незабываем выбрать в настройках семейство шрифта Font Awesome.
Скриншот №7
Стилизация иконок FontAwesome
Для стилизации иконок используются стандартные стили CSS для шрифтов. Например, чтобы поменять цвет иконки нужно использовать свойство CSS color, а поменять размер иконок Font Awesome нужно использовать свойство font-size.
Вот и вся информация, которая необходима для использования иконок от Font Awesome, как для разработки сайтов, так и для проектирования дизайн-макетов в Photoshop. Надеюсь статья вам понравилась и решила все ваши проблемы. А если нет, посмотрите мое видео на эту тему, там я показываю все на примере.
Если информация оказалась полезной поделитесь ей с друзьями в социальных сетях, а так же подписывайтесь на обновление блога и youtube канал, чтобы не пропустить полезные материалы.
Font Awesome: добавляем свои иконки
На сегодняшний день в сети полно различных «иконочных» шрифтов, при помощи которых можно легко добавлять иконки на своих сайтах.
Навигация по статье:
- Что такое Font Awesome
- Способы добавления своих иконок
- Работа с сервисом Icomoon
- Публикация готового сета иконок Iconmoon на сайте
- Как обновлять ваш сет с иконками в будущем
- Заключение
Что такое Font Awesome
Font Awesome — шрифт и CSS-инструментарий, предназначенный для размещения множества векторных, легко настраиваемых иконок на своих сайтах.
Таблица иконок Font Awesome
Все, что можно настраивать при помощи CSS — можно применить к иконкам Font Awesome на Ваших проектах. Одним из важнейших преимуществ этих шрифтов — четкое и красивое отображение при различных размерах. Если обычная png-иконка с прозрачным фоном или еще хуже jpg-иконка при увеличении будет выглядеть не очень красиво (появятся эффекты размытия, нечеткость), то иконка в виде шрифта сохранит идеальное качество. Вместе с этим, как в любом шрифте заранее предопределен список символов, так и в Font Awesome заранее предопределен список готовых, отобранных из наиболее часто нужных иконок.
Способы добавления своих иконок
Каждый день сервис Font Awesome принимает десятки запросов от пользователей и компаний на добавление своих иконок в библиотеку сервиса. Существует несколько факторов, которые влияют на положительное решение сервиса о добавлении новых иконок. Одним из основных является частота запросов, проще говоря — популярность. Но если даже ваша предложенная иконка идеально подходит по всем факторам и нужна всем, увидеть ее в общей библиотеке не удастся. Как минимум нужно будет ждать выхода обновления Font Awesome. А иконка, как правило нужно уже сейчас, для этого есть несколько способов. Ниже представлены наиболее подходящие из них.
Сложный способ редактирования Font Awesome
- Форкните репозиторий Font Awesome. Вам понадобится правильно настроенная среда разработки.
- Хакните файл с шрифтом FontAwesome.otf. Вы можете использовать эту инструкцию: создание Octicons (на английском).
- Поделитесь своей веткой с сообществом Font Awesome. Проверьте наличие открытых проблем, связанных с вашей веткой, и поделитесь своим репозиторием.
Простой способ внесения изменений в Font Awesome
Существует несколько онлайн сервисов, позволяющих кастомизировать Font Awesome. Вот наиболее популярные:
- Fort Awesome: https://fortawesome.com/ (от @davegandy, создатель Font Awesome) — Платный сервис, от создателя Font Awesome, пробный период — 14 дней.
- Fontello: http://fontello.com/ — Бесплатный сервис, удобный если вам нужно один раз изменить набор своих иконок.
- IcoMoon: http://icomoon.io/app/#/select — Онлайн сервис, который представляет много различных возможностей с редактированием и добавлением иконок. Бесплатный.
- Fontastic: http://fontastic.me/ — Еще один сервис, есть возможность генерации svg спрайтов, есть регистрация и управление вашими шрифтами. Бесплатный.
Вы можете использовать любой из предложенных, это быстро и просто. Лично я рекомендую IcoMooon. Последнее время пользуюсь именно им и в этой статье я опишу как использовать IcoMoon детальнее.
Добавление иконок через Icomoon
IconMon — онлайн сервис для создания собственных шрифтов из иконок для использования на сайтах или в мобильных и дектопных п
Таблица значений иконок Font Awesome. Как использовать иконки Font Awesome | Торгово
Таблица значений иконок Font Awesome. Как использовать иконки Font Awesome?
Font Awesome — что это?
Font Awesome — это набор готовых масштабируемых иконок для сайта. Иконки Font Awesome можно добавлять на сайт, как обычный текст и через CSS. Это даёт возможность изменять цвет, шрифт, тень иконок и многое другое. Для использования на своём сайте иконок Font Awesome необходимо подключить файл стилей иконок.
Файл стилей иконок Font Awesome подключается в главном файле сайта между тэгами и :
После того, как файл стилей подключен, можно использовать иконки на своем сайте.
Как использовать иконки Font Awesome на сайте:
1. Можно использовать в текстовом редакторе сайта использовав название иконки:
Можем увеличить размер иконки добавив классы: fa-lg, fa-2x, fa-3x, fa-4x или fa-5x
Пример добавления класса для увеличения иконки Font Awesome:
fa-lg fa-2x fa-3x fa-4x fa-5xДелаем иконки с фиксированной шириной
Используя класс fa-fw можно зафиксировать ширину иконки. Используется для создания меню с иконками.
Использование иконок в маркированном списке.
Классы fa-ul и fa-li заменяют маркеры по умолчанию в …
- элемент списка
- элемент списка
- элемент списка
- элемент списка
- элемент списка
- элемент списка
Анимация иконок Font Awesome.
Добавив классы fa-spin, fa-pulse, fa-spinner, fa-refresh или fa-cog сделаем вращающиеся иконки. Анимация не поддерживается в IE8 — IE9.
2. Иконку Font Awesome можно добавить в таблице стилей CSS:
Используя псевдокласс :before иконку можно добавить перед текстом, а при помощи псевдокласса :after иконка добавится после текста.
.cssclass:before { content: «\f039»; }
В параметре контент указываем не название иконки а её код.
Таблица значений иконок Font Awesome
fa-glass»\f000″
fa-music»\f001″
fa-search»\f002″
fa-envelope-o»\f003″
fa-heart»\f004″
fa-star»\f005″
fa-star-o»\f006″
fa-user»\f007″
fa-film»\f008″
fa-th-large»\f009″
fa-th»\f00a»
fa-th-list»\f00b»
fa-check»\f00c»
fa-times»\f00d»
fa-search-plus»\f00e»
fa-search-minus»\f010″
fa-power-off»\f011″
fa-signal»\f012″
fa-cog»\f013″
fa-trash-o»\f014″
fa-home»\f015″
fa-file-o»\f016″
fa-clock-o»\f017″
fa-road»\f018″
fa-download»\f019″
fa-arrow-circle-o-down»\f01a»
fa-arrow-circle-o-up»\f01b»
fa-inbox»\f01c»
fa-play-circle-o»\f01d»
fa-repeat»\f01e»
fa-refresh»\f021″
fa-list-alt»\f022″
fa-lock»\f023″
fa-flag»\f024″
fa-headphones»\f025″
fa-volume-off»\f026″
fa-volume-down»\f027″
fa-volume-up»\f028″
fa-qrcode»\f029″
fa-barcode»\f02a»
fa-tag»\f02b»
fa-tags»\f02c»
fa-book»\f02d»
fa-bookmark»\f02e»
fa-print»\f02f»
fa-camera»\f030″
fa-font»\f031″
fa-bold»\f032″
fa-italic»\f033″
fa-text-height»\f034″
fa-text-width»\f035″
fa-align-left»\f036″
fa-align-center»\f037″
fa-align-right»\f038″
fa-align-justify»\f039″
fa-list»\f03a»
fa-outdent»\f03b»
fa-indent»\f03c»
fa-video-camera»\f03d»
fa-picture-o»\f03e»
fa-pencil»\f040″
fa-map-marker»\f041″
fa-adjust»\f042″
fa-tint»\f043″
fa-pencil-square-o»\f044″
fa-share-square-o»\f045″
fa-check-square-o»\f046″
fa-arrows»\f047″
fa-step-backward»\f048″
fa-fast-backward»\f049″
fa-backward»\f04a»
fa-play»\f04b»
fa-pause»\f04c»
fa-stop»\f04d»
fa-forward»\f04e»
fa-fast-forward»\f050″
fa-step-forward»\f051″
fa-eject»\f052″
fa-chevron-left»\f053″
fa-chevron-right»\f054″
fa-plus-circle»\f055″
fa-minus-circle»\f056″
fa-times-circle»\f057″
fa-check-circle»\f058″
fa-question-circle»\f059″
fa-info-circle»\f05a»
fa-crosshairs»\f05b»
fa-times-circle-o»\f05c»
fa-check-circle-o»\f05d»
fa-ban»\f05e»
fa-arrow-left»\f060″
fa-arrow-right»\f061″
fa-arrow-up»\f062″
fa-arrow-down»\f063″
fa-share»\f064″
fa-expand»\f065″
fa-compress»\f066″
fa-plus»\f067″
fa-minus»\f068″
fa-asterisk»\f069″
fa-exclamation-circle»\f06a»
fa-gift»\f06b»
fa-leaf»\f06c»
fa-fire»\f06d»
fa-eye»\f06e»
fa-eye-slash»\f070″
fa-exclamation-triangle»\f071″
fa-plane»\f072″
fa-calendar»\f073″
fa-random»\f074″
fa-comment»\f075″
fa-magnet»\f076″
fa-chevron-up»\f077″
fa-chevron-down»\f078″
fa-retweet»\f079″
fa-shopping-cart»\f07a»
fa-folder»\f07b»
fa-folder-open»\f07c»
fa-arrows-v»\f07d»
fa-arrows-h»\f07e»
fa-bar-chart»\f080″
fa-twitter-square»\f081″
fa-facebook-square»\f082″
fa-camera-retro»\f083″
fa-key»\f084″
fa-cogs»\f085″
fa-comments»\f086″
fa-thumbs-o-up»\f087″
fa-thumbs-o-down»\f088″
fa-star-half»\f089″
fa-heart-o»\f08a»
fa-sign-out»\f08b»
fa-linkedin-square»\f08c»
fa-thumb-tack»\f08d»
fa-external-link»\f08e»
fa-sign-in»\f090″
fa-trophy»\f091″
fa-github-square»\f092″
fa-upload»\f093″
fa-lemon-o»\f094″
fa-phone»\f095″
fa-square-o»\f096″
fa-bookmark-o»\f097″
fa-phone-square»\f098″
fa-twitter»\f099″
fa-facebook»\f09a»
fa-github»\f09b»
fa-unlock»\f09c»
fa-credit-card»\f09d»
fa-rss»\f09e»
fa-hdd-o»\f0a0″
fa-bullhorn»\f0a1″
fa-bell»\f0f3″
fa-certificate»\f0a3″
fa-hand-o-right»\f0a4″
fa-hand-o-left»\f0a5″
fa-hand-o-up»\f0a6″
fa-hand-o-down»\f0a7″
fa-arrow-circle-left»\f0a8″
fa-arrow-circle-right»\f0a9″
fa-arrow-circle-up»\f0aa»
fa-arrow-circle-down»\f0ab»
fa-globe»\f0ac»
fa-wrench»\f0ad»
fa-tasks»\f0ae»
fa-filter»\f0b0″
fa-briefcase»\f0b1″
fa-arrows-alt»\f0b2″
fa-users»\f0c0″
fa-link»\f0c1″
fa-cloud»\f0c2″
fa-flask»\f0c3″
fa-scissors»\f0c4″
fa-files-o»\f0c5″
fa-paperclip»\f0c6″
fa-floppy-o»\f0c7″
fa-square»\f0c8″
fa-bars»\f0c9″
fa-list-ul»\f0ca»
fa-list-ol»\f0cb»
fa-strikethrough»\f0cc»
fa-underline»\f0cd»
fa-table»\f0ce»
fa-magic»\f0d0″
fa-truck»\f0d1″
fa-pinterest»\f0d2″
fa-pinterest-square»\f0d3″
fa-google-plus-square»\f0d4″
fa-google-plus»\f0d5″
fa-money»\f0d6″
fa-caret-down»\f0d7″
fa-caret-up»\f0d8″
fa-caret-left»\f0d9″
fa-caret-right»\f0da»
fa-columns»\f0db»
fa-sort»\f0dc»
fa-sort-desc»\f0dd»
fa-sort-asc»\f0de»
fa-envelope»\f0e0″
fa-linkedin»\f0e1″
fa-undo»\f0e2″
fa-gavel»\f0e3″
fa-tachometer»\f0e4″
fa-comment-o»\f0e5″
fa-comments-o»\f0e6″
fa-bolt»\f0e7″
fa-sitemap»\f0e8″
fa-umbrella»\f0e9″
fa-clipboard»\f0ea»
fa-lightbulb-o»\f0eb»
fa-exchange»\f0ec»
fa-cloud-download»\f0ed»
fa-cloud-upload»\f0ee»
fa-user-md»\f0f0″
fa-stethoscope»\f0f1″
fa-suitcase»\f0f2″
fa-bell-o»\f0a2″
fa-coffee»\f0f4″
fa-cutlery»\f0f5″
fa-file-text-o»\f0f6″
fa-building-o»\f0f7″
fa-hospital-o»\f0f8″
fa-ambulance»\f0f9″
fa-medkit»\f0fa»
fa-fighter-jet»\f0fb»
fa-beer»\f0fc»
fa-h-square»\f0fd»
fa-plus-square»\f0fe»
fa-angle-double-left»\f100″
fa-angle-double-right»\f101″
fa-angle-double-up»\f102″
fa-angle-double-down»\f103″
fa-angle-left»\f104″
fa-angle-right»\f105″
fa-angle-up»\f106″
fa-angle-down»\f107″
fa-desktop»\f108″
fa-laptop»\f109″
fa-tablet»\f10a»
fa-mobile»\f10b»
fa-circle-o»\f10c»
fa-quote-left»\f10d»
fa-quote-right»\f10e»
fa-spinner»\f110″
fa-circle»\f111″
fa-reply»\f112″
fa-github-alt»\f113″
fa-folder-o»\f114″
fa-folder-open-o»\f115″
fa-smile-o»\f118″
fa-frown-o»\f119″
fa-meh-o»\f11a»
fa-gamepad»\f11b»
fa-keyboard-o»\f11c»
fa-flag-o»\f11d»
fa-flag-checkered»\f11e»
fa-terminal»\f120″
fa-code»\f121″
fa-reply-all»\f122″
fa-star-half-o»\f123″
fa-location-arrow»\f124″
fa-crop»\f125″
fa-code-fork»\f126″
fa-chain-broken»\f127″
fa-question»\f128″
fa-info»\f129″
fa-exclamation»\f12a»
fa-superscript»\f12b»
fa-subscript»\f12c»
fa-eraser»\f12d»
fa-puzzle-piece»\f12e»
fa-microphone»\f130″
fa-microphone-slash»\f131″
fa-shield»\f132″
fa-calendar-o»\f133″
fa-fire-extinguisher»\f134″
fa-rocket»\f135″
fa-maxcdn»\f136″
fa-chevron-circle-left»\f137″
fa-chevron-circle-right»\f138″
fa-chevron-circle-up»\f139″
fa-chevron-circle-down»\f13a»
fa-html5″\f13b»
fa-css3″\f13c»
fa-anchor»\f13d»
fa-unlock-alt»\f13e»
fa-bullseye»\f140″
fa-ellipsis-h»\f141″
fa-ellipsis-v»\f142″
fa-rss-square»\f143″
fa-play-circle»\f144″
fa-ticket»\f145″
fa-minus-square»\f146″
fa-minus-square-o»\f147″
fa-level-up»\f148″
fa-level-down»\f149″
fa-check-square»\f14a»
fa-pencil-square»\f14b»
fa-external-link-square»\f14c»
fa-share-square»\f14d»
fa-compass»\f14e»
fa-caret-square-o-down»\f150″
fa-caret-square-o-up»\f151″
fa-caret-square-o-right»\f152″
fa-eur»\f153″
fa-gbp»\f154″
fa-usd»\f155″
fa-inr»\f156″
fa-jpy»\f157″
fa-rub»\f158″
fa-krw»\f159″
fa-btc»\f15a»
fa-file»\f15b»
fa-file-text»\f15c»
fa-sort-alpha-asc»\f15d»
fa-sort-alpha-desc»\f15e»
fa-sort-amount-asc»\f160″
fa-sort-amount-desc»\f161″
fa-sort-numeric-asc»\f162″
fa-sort-numeric-desc»\f163″
fa-thumbs-up»\f164″
fa-thumbs-down»\f165″
fa-youtube-square»\f166″
fa-youtube»\f167″
fa-xing»\f168″
fa-xing-square»\f169″
fa-youtube-play»\f16a»
fa-dropbox»\f16b»
fa-stack-overflow»\f16c»
fa-instagram»\f16d»
fa-flickr»\f16e»
fa-adn»\f170″
fa-bitbucket»\f171″
fa-bitbucket-square»\f172″
fa-tumblr»\f173″
fa-tumblr-square»\f174″
fa-long-arrow-down»\f175″
fa-long-arrow-up»\f176″
fa-long-arrow-left»\f177″
fa-long-arrow-right»\f178″
fa-apple»\f179″
fa-windows»\f17a»
fa-android»\f17b»
fa-linux»\f17c»
fa-dribbble»\f17d»
fa-skype»\f17e»
fa-foursquare»\f180″
fa-trello»\f181″
fa-female»\f182″
fa-male»\f183″
fa-gratipay»\f184″
fa-sun-o»\f185″
fa-moon-o»\f186″
fa-archive»\f187″
fa-bug»\f188″
fa-vk»\f189″
fa-weibo»\f18a»
fa-renren»\f18b»
fa-pagelines»\f18c»
fa-stack-exchange»\f18d»
fa-arrow-circle-o-right»\f18e»
fa-arrow-circle-o-left»\f190″
fa-caret-square-o-left»\f191″
fa-dot-circle-o»\f192″
fa-wheelchair»\f193″
fa-vimeo-square»\f194″
fa-try»\f195″
fa-plus-square-o»\f196″
fa-space-shuttle»\f197″
fa-slack»\f198″
fa-envelope-square»\f199″
fa-wordpress»\f19a»
fa-openid»\f19b»
fa-university»\f19c»
fa-graduation-cap»\f19d»
fa-yahoo»\f19e»
fa-google»\f1a0″
fa-reddit»\f1a1″
fa-reddit-square»\f1a2″
fa-stumbleupon-circle»\f1a3″
fa-stumbleupon»\f1a4″
fa-delicious»\f1a5″
fa-digg»\f1a6″
fa-pied-piper»\f1a7″
fa-pied-piper-alt»\f1a8″
fa-drupal»\f1a9″
fa-joomla»\f1aa»
fa-language»\f1ab»
fa-fax»\f1ac»
fa-building»\f1ad»
fa-child»\f1ae»
fa-paw»\f1b0″
fa-spoon»\f1b1″
fa-cube»\f1b2″
fa-cubes»\f1b3″
fa-behance»\f1b4″
fa-behance-square»\f1b5″
fa-steam»\f1b6″
fa-steam-square»\f1b7″
fa-recycle»\f1b8″
fa-car»\f1b9″
fa-taxi»\f1ba»
fa-tree»\f1bb»
fa-spotify»\f1bc»
fa-deviantart»\f1bd»
fa-soundcloud»\f1be»
fa-database»\f1c0″
fa-file-pdf-o»\f1c1″
fa-file-word-o»\f1c2″
fa-file-excel-o»\f1c3″
fa-file-powerpoint-o»\f1c4″
fa-file-image-o»\f1c5″
fa-file-archive-o»\f1c6″
fa-file-audio-o»\f1c7″
fa-file-video-o»\f1c8″
fa-file-code-o»\f1c9″
fa-vine»\f1ca»
fa-codepen»\f1cb»
fa-jsfiddle»\f1cc»
fa-life-ring»\f1cd»
fa-circle-o-notch»\f1ce»
fa-rebel»\f1d0″
fa-empire»\f1d1″
fa-git-square»\f1d2″
fa-git»\f1d3″
fa-hacker-news»\f1d4″
fa-tencent-weibo»\f1d5″
fa-qq»\f1d6″
fa-weixin»\f1d7″
fa-paper-plane»\f1d8″
fa-paper-plane-o»\f1d9″
fa-history»\f1da»
fa-circle-thin»\f1db»
fa-header»\f1dc»
fa-paragraph»\f1dd»
fa-sliders»\f1de»
fa-share-alt»\f1e0″
fa-share-alt-square»\f1e1″
fa-bomb»\f1e2″
fa-futbol-o»\f1e3″
fa-tty»\f1e4″
fa-binoculars»\f1e5″
fa-plug»\f1e6″
fa-slideshare»\f1e7″
fa-twitch»\f1e8″
fa-yelp»\f1e9″
fa-newspaper-o»\f1ea»
fa-wifi»\f1eb»
fa-calculator»\f1ec»
fa-paypal»\f1ed»
fa-google-wallet»\f1ee»
fa-cc-visa»\f1f0″
fa-cc-mastercard»\f1f1″
fa-cc-discover»\f1f2″
fa-cc-amex»\f1f3″
fa-cc-paypal»\f1f4″
fa-cc-stripe»\f1f5″
fa-bell-slash»\f1f6″
fa-bell-slash-o»\f1f7″
fa-trash»\f1f8″
fa-copyright»\f1f9″
fa-at»\f1fa»
fa-eyedropper»\f1fb»
fa-paint-brush»\f1fc»
fa-birthday-cake»\f1fd»
fa-area-chart»\f1fe»
fa-pie-chart»\f200″
fa-line-chart»\f201″
fa-lastfm»\f202″
fa-lastfm-square»\f203″
fa-toggle-off»\f204″
fa-toggle-on»\f205″
fa-bicycle»\f206″
fa-bus»\f207″
fa-ioxhost»\f208″
fa-angellist»\f209″
fa-cc»\f20a»
fa-ils»\f20b»
fa-meanpath»\f20c»
fa-buysellads»\f20d»
fa-connectdevelop»\f20e»
fa-dashcube»\f210″
fa-forumbee»\f211″
fa-leanpub»\f212″
fa-sellsy»\f213″
fa-shirtsinbulk»\f214″
fa-simplybuilt»\f215″
fa-skyatlas»\f216″
fa-cart-plus»\f217″
fa-cart-arrow-down»\f218″
fa-diamond»\f219″
fa-ship»\f21a»
fa-user-secret»\f21b»
fa-motorcycle»\f21c»
fa-street-view»\f21d»
fa-heartbeat»\f21e»
fa-venus»\f221″
fa-mars»\f222″
fa-mercury»\f223″
fa-transgender»\f224″
fa-transgender-alt»\f225″
fa-venus-double»\f226″
fa-mars-double»\f227″
fa-venus-mars»\f228″
fa-mars-stroke»\f229″
fa-mars-stroke-v»\f22a»
fa-mars-stroke-h»\f22b»
fa-neuter»\f22c»
fa-genderless»\f22d»
fa-facebook-official»\f230″
fa-pinterest-p»\f231″
fa-whatsapp»\f232″
fa-server»\f233″
fa-user-plus»\f234″
fa-user-times»\f235″
fa-bed»\f236″
fa-viacoin»\f237″
fa-train»\f238″
fa-subway»\f239″
fa-medium»\f23a»
fa-y-combinator»\f23b»
fa-optin-monster»\f23c»
fa-opencart»\f23d»
fa-expeditedssl»\f23e»
fa-battery-full»\f240″
fa-battery-three-quarters»\f241″
fa-battery-half»\f242″
fa-battery-quarter»\f243″
fa-battery-empty»\f244″
fa-mouse-pointer»\f245″
fa-i-cursor»\f246″
fa-object-group»\f247″
fa-object-ungroup»\f248″
fa-sticky-note»\f249″
fa-sticky-note-o»\f24a»
fa-cc-jcb»\f24b»
fa-cc-diners-club»\f24c»
fa-clone»\f24d»
fa-balance-scale»\f24e»
fa-hourglass-o»\f250″
fa-hourglass-start»\f251″
fa-hourglass-half»\f252″
fa-hourglass-end»\f253″
fa-hourglass»\f254″
fa-hand-rock-o»\f255″
fa-hand-paper-o»\f256″
fa-hand-scissors-o»\f257″
fa-hand-lizard-o»\f258″
fa-hand-spock-o»\f259″
fa-hand-pointer-o»\f25a»
fa-hand-peace-o»\f25b»
fa-trademark»\f25c»
fa-registered»\f25d»
fa-creative-commons»\f25e»
fa-gg»\f260″
fa-gg-circle»\f261″
fa-tripadvisor»\f262″
fa-odnoklassniki»\f263″
fa-odnoklassniki-square»\f264″
fa-get-pocket»\f265″
fa-wikipedia-w»\f266″
fa-safari»\f267″
fa-chrome»\f268″
fa-firefox»\f269″
fa-opera»\f26a»
fa-internet-explorer»\f26b»
fa-television»\f26c»
fa-contao»\f26d»
fa-500px»\f26e»
fa-amazon»\f270″
fa-calendar-plus-o»\f271″
fa-calendar-minus-o»\f272″
fa-calendar-times-o»\f273″
fa-calendar-check-o»\f274″
fa-industry»\f275″
fa-map-pin»\f276″
fa-map-signs»\f277″
fa-map-o»\f278″
fa-map»\f279″
fa-commenting»\f27a»
fa-commenting-o»\f27b»
fa-houzz»\f27c»
fa-vimeo»\f27d»
fa-black-tie»\f27e»
fa-fonticons»\f280″
Иконки Font Awesome на сайте
Вы здесь: Главная — CSS — CSS3 — Иконки Font Awesome на сайте
Использовать на сайте иконки Font Awesome очень просто и для этого совсем не надо быть дизайнером. Даже если вы не подберёте себе нужную иконку из коллекции бесплатных (1109 free иконок), то всегда можно купить профессиональный набор (1877 pro иконок).
Сегодня мы будем верстать блок — «Контакты». Это пример типичного информационного блока, обычно от находится внизу сайта или на отдельной странице. Если вы думаете, что это нарисовал дизайнер в фотошопе, то глубоко ошибаетесь. Для создания такого блока вообще не нужен Photoshop, достаточно иметь хороший вкус, немного разбираться в HTML5/CSS3 и уметь работать с иконочным шрифтом Font Awesome.
Работать с иконочным шрифтом мы с вами сегодня научимся, а изучить основы HTML5/CSS3, поможет замечательный видеокурс — «Вёрстка сайта с нуля 2.0».
Как подключить иконки Font Awesome
Официальный сайт: https://fontawesome.com
Самый простой способ подключения — через Font Awesome CDN. Вы просто копируете строчку с ссылкой на файл стилей на официальном сайте и вставляете в свой HTML файл.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
HTML разметка
Создается контейнер div с классом «info-box», внутри которого три элемента li списка ul с двумя span. Span с классом «icon» содержит тег <i></i>, скопированный с сайта Font Awesome при выборе нужной иконки. Между тегами другой span с классом «info» находится контактная информация.
<div>
<h3>Контакты</h3>
<ul>
<li>
<span><i aria-hidden="true"></i></span>
<span>Ленинский пр. 25, г. Москва</span>
</li>
<li>
<span><i aria-hidden="true"></i></span>
<span><a href="tel:+7 (495) 431-95-22">+7 (495) 431-95-22</a></span>
</li>
<li>
<span><i aria-hidden="true"></i></span>
<span><a href="mailto:[email protected]">[email protected]</a></span>
</li>
</ul>
</div>
Так выглядит блок на промежуточном этапе, на голом HTML.
Работа с иконками в CSS файле
В этом селекторе заданы все свойства для иконок, точно такие же свойства мы задали бы и у шрифтов. В том и состоит вся прелесть — простота и гибкость в стилизации шрифтовых иконок. Можно позиционировать, выравнивать и задавать цвета и размеры какие угодно.
ul li .icon {
position:relative;
top: 2px;
display: inline-block;
width: 25px;
color: #9c27b0;
vertical-align: top;
}
Живой пример в браузере, после стилизации.
Верстальщику на заметку
Некоторые дизайнеры в своих PSD макетах используют готовые иконки, установленного шрифта Font Awesome Regular. Начинающего верстальщика это может сбить с толку и вместо того, чтобы вставить иконку через тег <i>, он вырежет иконку и вставит, как картинку. Так делать не надо, это крайне непрофессионально!
Смотрите весь код на jsfiddle.
-
Создано 11.06.2018 10:19:52 -
Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
Bootstrap 3 — Иконки Font Awesome
- Статьи
- Видеоуроки
- Таймлайн
- Вопросы
- Поиск
-
- Войти
- Регистрация
- HTML & CSS
- JavaScript
- Bootstrap
Подключить иконки от Font Awesome на сайт
Просто здесь отличие от других, очень большой выбор и он может подойти на любую тематику и после установки сайт приобретает другой дизайн. Он работает по шрифту, какой он по высоте, такая и кнопка будет. Но если вам нужно, чтоб саму кнопку увеличить а шрифт был по умолчанию, то ЗДЕСЬ вы можете ознакомиться как сделать. Для вас будет предоставлено почти 700 иконок разнопланового характера, согласитесь, что выбор просто огромный. До этого писал одну статью по установке, но можно ставить по разному, вы можете по первому МАНУАЛУ установить и так как здесь описано будет.
А просто мы все их скачаем, чтоб они на сайте были, и потом если нужно то выводить будем. В первой статье просто по стилю от самого интернет ресурса установка, и там есть небольшие нюансы. Это если сайт источник будет не доступен, то кнопки у вас просто пропадут, здесь у нас они уже на сайте будут и внешний ресурс не помеха становиться, просто по первой установке легче ставить. Но если вы все сделаете как описано, то вы поставите очень быстро и украсите свой портал. Здесь сразу нужно сказать, что все они идут бесплатно, что доступно всем кнопка скачать и не кто жалобу не подаст. Как уже поняли, все будет зависит от CSS вашего сайта, полностью управление с него будет, но вы поймете далее по их установки.
Приступаем к установки:
Для начало заходим на официальный сайт Font Awesome и там на главной странице будет кнопка скачать, что и нажимаем на ее.
Как только нажмете, то появится окно и нам нужно смотреть в низ где написано «Спасибо, просто хочу скачать» что можете посмотреть на изображение.
Как скачали архив, то его распечатываем и там будет несколько папок, но нам только нужны папка CSS и fonts — что загружаем файловый менеджер вашего сайта.
Все сделали, и остается последний штрих, так говорил, что от стилей зависит, и нам нужно вывести в CSS одну папку.
Копируем этот стиль и в CSS в самый вверх потолок ставим, там уже папка наша прописана.
Код
@import url(‘/css/font-awesome.css’) all;
На этом все, больше не чего не нужно делать.
Теперь нужно на сайте Font Awesome как брать ИКОНКИ, которые расположены на этой странице, где переходим и смотрим какая вам нужна. Как нашли, то просто нажимаем на ее и открывается страница с нашей кнопкой, там будет название и стиль, что копируем его и ставим на сайт, как установили она появится. Если нужно увеличить, но в начале статьи все рассказал по этому поводу.
Теперь все, думаю понятно все объяснил, будут вопросы, оставляем комментарий, постараемся дать ответ как можно корректный и понятный.
Спасибо все.
Font Awesome Введение
Основные значки
Чтобы использовать значки Font Awesome, добавьте следующую строку в раздел своей HTML-страницы:
Примечание: Скачивание или установка не требуется!
Вы размещаете значки Font Awesome, используя префикс fa и имя значка.
Пример
Следующий код: