Содержание

Украшаем дизайн сайта с помощью иконок Font Awesome — Константин Хмелев

Здравствуйте, друзья.

Сегодня новая статья из рубрики «Дизайн».

Кто следит за моим блогом знают, что пару дней назад я обновил дизайн блога. Так вот, все иконки, которые вы видите напротив пунктов меню и рубрик, а также в некоторых заголовках, например, во вкладках между переключением популярных и обсуждаемых записей, возле заголовка похожих статей в конце текста и возле заголовка количества комментариев, это все не картинки, а специальный шрифт Font Awesome, с помощью которого можно без проблем делать хорошие качественные иконки.

Тоже самое касается и маленьких иконок возле количества комментариев, даты, количества просмотров.

иконки font awesome

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

В общем, штука очень крутая. Я когда делал свои первые заказы, столкнулся с этими иконками и мне они доставили очень много неудобств. Я просто не знал, как ими пользоваться, и в некоторых случаях просто заменял эти иконки на изображения. Сейчас же я не вижу в их использовании абсолютно никаких проблем. Достаточно подключить шрифт Font Awesome к сайту, а затем в нужное место добавить код вывода иконки. Очень просто, давайте рассмотрим на практике.

СодержаниеПоказать

Как подключить иконки Font Awesome к сайту

Существует 2 способа подключения:

  1. Подключить библиотеку иконок с самого сервиса, т.е. прописать путь к файлу иконок на стороне облачного хранилища, где сервис его хранит. В этом случае каждый раз при загрузке страницы будет грузиться и данный файл. Изначально у меня стоял такой вариант, но потом я заметил, что он достаточно сильно замедляет загрузку страниц. Именно поэтому я перешел на второй вариант.
  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] и выбрать подходящую иконку. Жмем на понравившуюся иконку и попадаем на страницу с вариантами различных размеров иконок, чтобы вы понимали, как она будет выглядеть при разных размерах шрифта. Также там будет и код, который будет выводить иконку.

код иконки font awesome

Этот код вставляем в любое место, где хотим отобразить иконку.

[box]

Замечу, что такой метод вставки не работает в названии виджетов WordPress. Если просто вставить перед фразой код иконки, то он будет пропадать оттуда. Поэтому нужно использовать другой метод с помощью Jquery, о котором я сделаю следующую статью Там тоже все очень просто.

[/box]

Необходимо размещать код в файлах шаблона или в каких-то текстовых элементах. Например, в текстовом виджете в самом поле ввода содержимого, иконки работают. Таким образом у меня работает виджет популярных и обсуждаемых записей. Остальные же иконки прописаны в верстке, как самого шаблона, так и плагинов.

Вариант 2

Скачиваем папку с файлами [urlspan]отсюда[/urlspan].

скачиваем иконки font awesome

скачиваем только иконки font awesome

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

файлы библиотеки font awesome

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

Далее нужно подключить файл 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> вашего сайта, на тех страницах где вы собираетесь использовать иконки.

Подключение Font Awesome с помощью CDN
Скриншот №1

На скриншоте №1 изображены настройки, которые я использую.

  1. Выбираем версию, которая нам нужна. Free — бесплатная версия. Pro — платная и имеет дополнительные стили и наборы иконок.
  2. Начертание шрифта, которое мы будем использовать в своем проекте.
  3. Что мы будем использовать. Webfont — иконочный шрифт. SVG — иконки в формате .svg
  4. Сгенерированный код для подключения 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:

Директория скаченного Font Awesome Скриншот №2

Для работы иконочного шрифта необходимы только папки выделенные красным. И то в паке /CSS нам нужен только один файл css/all.min.css (Смотрите скриншот №3)

Подключение font awesome css Скриншот №3

Файл all.min.css

хранит все стили шрифта Font Awesome, я использую именно этот файл. На это есть много причин связанные с моим личным удобством. Вы же можете использовать тот файл, стили которого вы будете использовать. Например, если вы хотите использовать только бесплатный иконочный шрифт, достаточно подключить файл fontawesome.min.css.

.min в названии файла показывает, что файл сжат, то есть убраны лишние пробелы и переносы. Это увеличивает скорость обработки этого файла, но если вы собираетесь его редактировать, что я вам делать не рекомендую, то удобней использовать файл без .min

Переносим папку webfont и файл all.min.css на свой хостинг.

Очень важно! Папка

webfont нужно располагать на директорию выше чем файл all.min.css, иначе шрифт Font Awesome не подключится, так как в стилях прописан именно такой путь для файлов со шрифтами. Если такой способ противоречит структуре вашего проекта, тогда просто пропишите в файле all.min.css новый путь до папки webfont.

У меня это выглядит так:

Иерархия файлов font awesome Скриншот №4

В папке fontawesome хранится один файл all.min.css

Теперь нам нужно подключить Font Awesome к своему сайту, для этого подключаем стили all.min.css, так как вы обычно подключаете файлы со стилями. Этот процесс я описывать не буду, так как он имеет огромное количество вариантов и каждый делает это по-своему. Но если вы новичок и не знаете, как подключать файлы со стилями, то Google вам в помощь. При возникновении трудностей пишите в комментариях, и я обязательно вам помогу.

Как использовать Font Awesome

В этой части статьи мы разберем как правильно использовать Font Awesome в веб-разработке или дизайне на примере Photoshop.

Как использовать Font Awesome в HTML

Это самый простой способ использования иконочного шрифта. Достаточно выбрать из каталога иконок Font Awesome нужную иконку и вставить ее код в нужное место вашего html документа. На скриншоте № 5 под цифрой 1 изображено место откуда можно узнать код иконки.

Как использовать Font Awesome Скриншот №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:

Установка Font Awesome на компьютер Скриншот №6

После установки можно использовать Font Awesome в фотошопе, для этого мы копируем необходимую нам иконку с каталога (цифра 3 на скриншоте №5) и вставляем в photoshop как текст. Незабываем выбрать в настройках семейство шрифта Font Awesome.

Как использовать font awesome в photoshop Скриншот №7

Стилизация иконок FontAwesome

Для стилизации иконок используются стандартные стили CSS для шрифтов. Например, чтобы поменять цвет иконки нужно использовать свойство CSS color, а поменять размер иконок Font Awesome нужно использовать свойство font-size.

Вот и вся информация, которая необходима для использования иконок от Font Awesome, как для разработки сайтов, так и для проектирования дизайн-макетов в Photoshop. Надеюсь статья вам понравилась и решила все ваши проблемы. А если нет, посмотрите мое видео на эту тему, там я показываю все на примере.

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

Font Awesome: добавляем свои иконки

На сегодняшний день в сети полно различных «иконочных» шрифтов, при помощи которых можно легко добавлять иконки на своих сайтах.
Навигация по статье:

  1. Что такое Font Awesome
  2. Способы добавления своих иконок
  3. Работа с сервисом Icomoon
  4. Публикация готового сета иконок Iconmoon на сайте
  5. Как обновлять ваш сет с иконками в будущем
  6. Заключение

Что такое Font Awesome

Font Awesome — шрифт и CSS-инструментарий, предназначенный для размещения множества векторных, легко настраиваемых иконок на своих сайтах.

Таблица иконок Font Awesome

Все, что можно настраивать при помощи CSS — можно применить к иконкам Font Awesome на Ваших проектах. Одним из важнейших преимуществ этих шрифтов — четкое и красивое отображение при различных размерах. Если обычная png-иконка с прозрачным фоном или еще хуже jpg-иконка при увеличении будет выглядеть не очень красиво (появятся эффекты размытия, нечеткость), то иконка в виде шрифта сохранит идеальное качество. Вместе с этим, как в любом шрифте заранее предопределен список символов, так и в Font Awesome заранее предопределен список готовых, отобранных из наиболее часто нужных иконок.

Способы добавления своих иконок

Каждый день сервис Font Awesome принимает десятки запросов от пользователей и компаний на добавление своих иконок в библиотеку сервиса. Существует несколько факторов, которые влияют на положительное решение сервиса о добавлении новых иконок. Одним из основных является частота запросов, проще говоря — популярность. Но если даже ваша предложенная иконка идеально подходит по всем факторам и нужна всем, увидеть ее в общей библиотеке не удастся. Как минимум нужно будет ждать выхода обновления Font Awesome. А иконка, как правило нужно уже сейчас, для этого есть несколько способов. Ниже представлены наиболее подходящие из них.

Сложный способ редактирования Font Awesome

  1. Форкните репозиторий Font Awesome. Вам понадобится правильно настроенная среда разработки.
  2. Хакните файл с шрифтом FontAwesome.otf. Вы можете использовать эту инструкцию: создание Octicons (на английском).
  3. Поделитесь своей веткой с сообществом 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 на сайте

Использовать на сайте иконки Font Awesome очень просто и для этого совсем не надо быть дизайнером. Даже если вы не подберёте себе нужную иконку из коллекции бесплатных (1109 free иконок), то всегда можно купить профессиональный набор (1877 pro иконок).

Сегодня мы будем верстать блок — «Контакты». Это пример типичного информационного блока, обычно от находится внизу сайта или на отдельной странице. Если вы думаете, что это нарисовал дизайнер в фотошопе, то глубоко ошибаетесь. Для создания такого блока вообще не нужен Photoshop, достаточно иметь хороший вкус, немного разбираться в HTML5/CSS3 и уметь работать с иконочным шрифтом Font Awesome.

Иконки 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.

Иконки Font Awesome на сайте.

Работа с иконками в CSS файле

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

ul li .icon {
    position:relative;
    top: 2px;
    display: inline-block;
    width: 25px;
    color: #9c27b0;
    vertical-align: top;
}

Живой пример в браузере, после стилизации.

Верстальщику на заметку

Некоторые дизайнеры в своих PSD макетах используют готовые иконки, установленного шрифта Font Awesome Regular. Начинающего верстальщика это может сбить с толку и вместо того, чтобы вставить иконку через тег <i>, он вырежет иконку и вставит, как картинку. Так делать не надо, это крайне непрофессионально!

Смотрите весь код на jsfiddle.

  • Иконки Font Awesome на сайте. Создано 11.06.2018 10:19:52
  • Иконки Font Awesome на сайте. Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Bootstrap 3 — Иконки Font Awesome

  • Статьи
  • Видеоуроки
  • Таймлайн
  • Вопросы
  • Поиск
    • Войти
    • Регистрация
  • HTML & CSS
  • JavaScript
  • Bootstrap

Подключить иконки от Font Awesome на сайт

Многие думаю заметили красивые иконки от Font Awesome, которые на стилях а не на ссылки. И здесь разберем как их подключить на сайт. Этот мануал будет полностью занят, как подробно все сделать, и где что скачать и безусловно установить. Так как шрифтовые иконки стали очень популярны и теперь все больше можно их увидеть как на блоге другого хостинг так и на конструкторе uCoz. Они просто отлично могут заменить графические кнопки, которые вы делаете на фотошоп или просто берете с ресурсов по размеру.

Просто здесь отличие от других, очень большой выбор и он может подойти на любую тематику и после установки сайт приобретает другой дизайн. Он работает по шрифту, какой он по высоте, такая и кнопка будет. Но если вам нужно, чтоб саму кнопку увеличить а шрифт был по умолчанию, то ЗДЕСЬ вы можете ознакомиться как сделать. Для вас будет предоставлено почти 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 и имя значка.

Пример

Следующий код:








Результатов в:

Попробуй сам »

Font Awesome разработан для использования со встроенными элементами. и элементы широко используются для иконок.

Также обратите внимание, что если вы измените размер шрифта или цвет контейнера значка, значок меняется.То же самое и с тенью, и со всем остальным, что унаследовано с помощью CSS.



fa-lg (рост на 33%), fa-2x , fa-3x , Классы fa-4x или fa-5x используются для увеличения размеров значков относительно их контейнера.

Пример

Следующий код:





<Я>

Результатов в:

Попробуй сам »

Совет: Если ваши значки обрезаются сверху и снизу, увеличьте высоту строки.


Классы fa-ul и fa-li используются для замены маркеров по умолчанию в неупорядоченных списках.

Пример

Следующий код:


  • Список значки

  • Значки списка

  • Значки списка

Результатов в:

  • Значки списка
  • Значки списка
  • Значки списка
Попробуй сам »

fa-border , fa-pull-right или fa-pull-left классы используются для цитат или значков статей.

Пример

Следующий код:


Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur.

Результатов в:

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur.

Попробуй сам »

Класс fa-spin получает вращение любой иконки, а fa-pulse класс получает любой значок, который можно повернуть за 8 шагов.

Пример

Следующий код:





Результатов в:

Попробуй сам »

Примечание. IE8 и IE9 не поддерживают анимацию CSS3.


Классы fa-rotate- * и fa-flip- * используются для поворота и отражения значков.

Пример

Следующий код:






Результатов в:

Попробуй сам »

Чтобы сложить несколько значков, используйте класс fa-stack на родительском элементе fa-stack-1x класс для значка обычного размера и fa-stack-2x для значка большего размера.

Класс fa-inverse можно использовать в качестве альтернативного цвета значка. Вы также можете добавить больше icon классы к родительскому элементу для дальнейшего управления размером.

Пример

Следующий код:





fa-twitter на fa-circle-thin





fa-twitter (обратный) на fa-circle





fa-ban на fa-camera

Результатов в:

фа-твиттер на фа-круг-тонкий
fa-twitter (инверсный) на fa-circle
фа-бан на фа-камеру

Попробуй сам »

Класс fa-fw используется для установки значков фиксированной ширины.Этот класс полезен, когда другой значок ширина скинуть выравнивание. Особенно полезно в навигационных списках и группах списков Bootstrap.

Пример

Попробуй сам »

Font Awesome также отлично работает со всеми компонентами Bootstrap.


,

svg — Добавить пользовательские значки в font awesome

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Общественные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним возможности технической карьеры
  5. Талант Нанять технических талантов
  6. реклама Обратитесь к разработчикам по всему миру
,

Font Awesome 5 Введение


Font Awesome 5

Font Awesome 5 имеет версию PRO с 7842 значками и БЕСПЛАТНУЮ версию с 1588 значками. Этот учебник будет посвящен БЕСПЛАТНОЙ версии.

Чтобы использовать значки Free Font Awesome 5, вы можете загрузить шрифт Потрясающая библиотека, или вы можете создать учетную запись на Font Awesome и получить код (называемый KIT CODE) для использования при добавлении Font Awesome на свою веб-страницу.

Мы предпочитаем подход KIT CODE.Как только вы получите код, вы можете начать использовать Font Awesome на ваших веб-страницах, включая только одну строку HTML-кода:

Пример

Получили код a076d05399 и вставив тег скрипта с кодом, мы можем начать использовать Font Awesome:






Результатов в:

Попробуй сам »

Примечание: Никакой загрузки или установки не требуется!


Получите свой собственный КОД НАБОРА

Зарегистрируйтесь и получите свой собственный код бесплатно по адресу:

fontawesome.ком

Новое в Font Awesome 5

Новым в Font Awesome 5 является префикс fas , Font Awesome 4 использует fa .

Модель s в fas обозначает solid , а некоторые значки также имеют режим обычный , указывается с помощью префикса far :

Пример


Результатов в:

Попробуй сам »

Font Awesome разработан для использования со встроенными элементами. и элементы широко используются для иконок.

Также обратите внимание, что если вы измените размер шрифта или цвет контейнера значка, значок меняется. То же самое и с тенью, и со всем остальным, что унаследовано с помощью CSS.

Пример


Результатов в:

Попробуй сам »

факс , фа-см , fa-lg , fa-2x , г. fa-3x , г. fa-4x , г. fa-5x , г. fa-6x , г. fa-7x , г. fa-8x , г. fa-9x , г. или fa-10x классы используются для настройки размеров значков относительно их контейнера.

Пример

Следующий код:







Результатов в:

Попробуй сам »

Классы fa-ul и fa-li используются для замены маркеров по умолчанию в неупорядоченных списках.

Пример

Следующий код:


  • Список Элемент

  • Список Элемент

  • Список Товар

Результатов в:

Попробуй сам »

Класс fa-spin получает любой значок для вращения, а fa-pulse класс получает любой значок, который можно повернуть за 8 шагов.

Пример

Следующий код:






Результатов в:

Попробуй сам »

Примечание. IE8 и IE9 не поддерживают анимацию CSS3.


Классы fa-rotate- * и fa-flip- * используются для поворота и отражения значков.

Пример

Следующий код:






Результатов в:

Попробуй сам »

Чтобы сложить несколько значков, используйте класс fa-stack в родительском элементе fa-stack-1x класс для значка обычного размера и fa-stack-2x для значка большего размера.

Класс fa-inverse можно использовать в качестве альтернативного цвета значка.Вы также можете добавить больше icon классы к родительскому элементу для дальнейшего управления размером.

Пример

Следующий код:





fa-twitter (инверсный) на fa-circle (сплошной)





fa-twitter на fa-circle (обычный)





fa-ban на fa-camera

Результатов в:

Попробуй сам »

Так же, как буквы и другие символы, значки могут иметь разную ширину, и если вам нужно выровнять значки по вертикали, как в списке или меню, это может быть проблема.

Класс fa-fw используется для установки значков на фиксированная ширина.

Пример

Фиксированная ширина:

Значок 1

Значок 2

Icon 3

Без фиксированного Ширина:


Значок 1

Значок 2

Значок 3

Результатов в:


Попробуй сам »

fa-border , fa-pull-right или fa-pull-left классы используются для цитат или значков статей.

Пример

Следующий код:


Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur.

Результатов в:

Попробуй сам »
,

css — Font Awesome не работает, значки отображаются в виде квадратов

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Общественные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним возможности технической карьеры
  5. Талант Нанять технических талантов
  6. реклама Обратитесь к разработчикам по всему миру

Загрузка…

  1. Авторизоваться зарегистрироваться
.