Как подключить иконки font awesome: Начало работы с Font Awesome

15 Мар 1970   | Разное

Содержание

Как подключить и использовать 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

На скриншоте №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:

Скриншот №2

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

Скриншот №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.

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

Скриншот №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 канал, чтобы не пропустить полезные материалы.

Как подключить шрифт Awesome у себя на сайте — Технический блокнот

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

В настоящий момент шрифт Awesome содержит более 1500 бесплатных иконок!

Как установить шрифт Awesome на сайт

Для того чтобы воспользоваться иконками шрифта Awesome нужно скачать набор шрифтов и стилей себе на сайт. Для этого переходим на официальный сайт — https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself и скачиваем архив, нажав на кнопку [Font Awesome Free for the Web].

Далее вам необходимо распаковать архив и скопировать к себе на сайт содержимое папок /css и /webfonts, например в директорию /css/awesome.

Теперь подключите в секции <head> вашего сайта стили Awesome:

<link rel="stylesheet" href="/css/awesome/css/all.css" />

Альтернативный способ подключения шрифтов Awesome

Можно ничего не копировать к себе на сайт, а загружать все данные из CDN сети. Для этого нужно добавить следующий код в раздел <head>:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">

Плюсом такого решения будет более быстрая скорость работы сайта, так как данные будут параллельно грузиться с разных серверов (сайт — с вашего хостинга, а шрифты — из сети Awesome), кроме того шрифты уже могут быть закешированы браузером, если вы когда-то посещали сайты на которых они используются.

Минус — это невозможность использования на автономных сайтах (без доступа к интернету) и зависимость от CDN сети Awesome. Поэтому я, как правило, использую первый способ.

Как использовать шрифты awesome на сайте

После того как вы подключили шрифты у себя на сайте вы можете добавить иконки Awesome на веб-страницу двумя способами:

  1. задать соответствующие классы для элементов <i> и <span>;
  2. добавить к нужному элементу с помощью псевдоэлементов
    :before    , :after и соответствующего значения свойства content.

Пример использования шрифтов Awesome

Для одного из сайтов я использовал следующий код (для элемента <i> использованы стили шрифта awesome версии 4.7.0):


<div>
    <div><i></i><br>Поставка вычислительной техники и ПО</div>
    <div><i></i><br>Построение систем охранного телевидения и видеонаблюдения</div>
    <div><i></i><br>Разработка систем контроля и управления доступом</div>
    <div><i></i><br>Проектирование и монтаж ЛВС/СКС и телефонии</div>
</div>

В браузере результат выглядит так:

Где посмотреть иконки Awesome для сайта

Если буквы и цифры у вас нанесены на клавиши клавиатуры и их использование не вызывает затруднений, то вот по шрифтам awesome есть вопрос: а как узнать соответствие кода иконки и его графического изображения. Например, какой использовать HTML код для отображения иконки Android?

Чтобы выяснить это посетите официальный сайт — https://fontawesome.com/icons?d=gallery&m=free

Например, изображению Android соответствует следующий код:

<i></i>

На экране он выглядит так:

Какую версию шрифтов Awesome лучше использовать на сайте

Шрифт Awesome постоянно развивается, в него регулярно добавляются новые иконки и варианты их оформления. На момент написания статьи актуальна 5 версия шрифта. Но вы спокойно можете использовать у себя на сайте предыдущие редакции 4.7.0 или даже 3.2.1. Для этого посетите страницы https://fontawesome.com/v4.7.0/ и https://fontawesome.com/v3.2.1/ соответственно.

Обратите внимание, что при скачивании предыдущей версии шрифта вас будут постоянно склонять к использованию новой версии 🙂

P.S.

На своих сайтах я обычно использую шрифт awesome версии 4.7.0. Причина в том, что он занимает меньше места. Правда в этой версии заметно скромнее набор иконок, в частности отсутствует упомянутая выше иконка

Android, которая появилась лишь в версии 5.0.

Благодарности

При написании статьи были использованы следующие источники:

  1. https://html5book.ru/shrift-awesome/

Шрифтовые иконки — достойная альтернатива растру

Чем иконочный шрифт лучше иконок jpg/png

Масштабируемость без потери качества. Никто не ищет буквы побольше для заголовков и буквы поменьше для текста. Ты просто подключаешь шрифт и в css указываешь размер букв. Тоже самое с иконочным шрифтом. Иконку можно сделать любого размера и она всегда будет чёткой.

Иконочный шрифт это прежде всего шрифт и следовательно к таким иконкам применяются все css свойства, которые можно применить к тексту. Для изменения цвета иконки не нужен графический редактор. Просто поменяй цвет в css. Кстати псевдо классы типа :hover тоже срабатывают, что даёт ещё больший простор для творчества.

Как подключить иконочный шрифт fontawesome

Где брать иконочные шрифты? Поиск выдаст кучу результатов разной степени платности и универсальности. Рассмотрим два fontello.com и fontawesome.ru

Начнём с бесплатного шрифта с хорошим описанием на русском — fontawesome.ru. Первым делом качаешь и распаковываешь архив. Копируешь папку font-awesome в папку с сайтом. Дальше нужно подключить… Думаешь шрифт? Нет. Подключаеш css файл font-awesome.min.css добавив в <head>

<link rel="stylesheet" href="путь/до/font-awesome/css/font-awesome.min.css">

Иконки fontawesome вставляются следующим образом. Там где должна быть иконка вставляешь строчный элемент, например <i> или <span> и добавляешь к нему класс fa и соответствующий иконке класс.  Проще сделать следующим образом. На сайте fontawesome.ru переходишь в меню Иконки и кликаешь по нужной иконке. Попадаешь на страницу где можно скопировать код, который нужно разместить там, где будет иконка. Так выглядит код для Телеграм.

<i aria-hidden="true"></i>

Просто выводом иконок дело не ограничивается. Добавляя классы можно анимировать, изменять размер, поворачивать иконки. Полный список возможностей с подробным описанием и примерами смотри на fontawesome.ru/examples/ .

Ещё один сайт где можно на халяву хапнуть шрифтовых иконок — fontello.com. Он отличается от fontawesome.ru тем, что можно создать свой набор иконок, а не тянуть все, большая часть которых не пригодиться. Чтобы создать свой набор  заходишь на  fontello.com. На вкладке Select Icons кликаеш по нужным иконкам. Рядом с красной кнопкой Download пишешь название шрифта и скачиваешь свой иконочный шрифт.

Иконки с fontello вставляются также через добавление класса к строковому элементу. Название классов смотри в файле demo.html(должен быть в скачанном архиве с шрифтом). Дефолтные названия классов можно изменить на вкладке Customize Names.

Любые иконки на сайт font-awesome 4.2

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

Особенность таких иконок в том, что они:

  1. Легко перекрашиваются — фотошоп не нужен, так как иконки в виде шрифтов, то можно менять не только цвет, но и размер иконки без ухудшения качества!
  2. Иконки поддерживаются IE 8 и выше
  3. Иконки можно поворачивать и крутить за счет анимации.

Подключение и использование иконок 

Подключить иконки можно так: 

1) Поставьте тег <!DOCTYPE html> в начале страницы (если его у вас нет)

2) Пропишите в <head></head> ссылку на подключение css файла <link href=»font-awesome.css» rel=»stylesheet» type=»text/css»/> и загрузите шрифты к нему (папка fonts)

Вставить иконку куда-угодно: <i></i> — где fa-github-alt — класс картинки иконки

Вставить иконку в input, submit, textarea и т.п.: 

Используется label с CSS. Пример: 

<label></label>

<input type=»text»/>

CSS,который применяется к label — таким образом, label становится поверх input

label.success1{color:#339900;} 

label.success1:after { 

color: #339900; 

content: «\f00c»; /* код картинки */ 

font-family: FontAwesome; 

position: absolute; 

padding: 1px 0px 0px 5px; 

} 

Все иконки fontawesome
Скачать исходник fontawesome

——————————————————————————

Все иконки icomoon
Скачать исходник icomoon

Читайте также

blogprogram.ru | 2014-12-25 | Любые иконки на сайт font-awesome 4.2 | В данном материале вы найдете файл, который поддерживает 400! иконок для сайта. В нем вы найдете стрелки, домики, трубки, звездочки, кружки и множеств | http://blogprogram.ru/wp-content/uploads/2014/12/FireShot-Capture-0000041.jpg-1280×960_-http___kotod.ru_sites_default_files_-131×131.png

иконки, иконочный шрифт — Tokar.uaTokar.ua

ИконкаКлассы
 glyphicon glyphicon-asterisk
 glyphicon glyphicon-plus
 glyphicon glyphicon-euro
 glyphicon glyphicon-minus
 glyphicon glyphicon-cloud
 glyphicon glyphicon-envelope
 glyphicon glyphicon-pencil
 glyphicon glyphicon-glass
 glyphicon glyphicon-music
 glyphicon glyphicon-search
 glyphicon glyphicon-heart
 glyphicon glyphicon-star
 glyphicon glyphicon-star-empty
 glyphicon glyphicon-user
 glyphicon glyphicon-film
 glyphicon glyphicon-th-large
 glyphicon glyphicon-th
 glyphicon glyphicon-th-list
 glyphicon glyphicon-ok
 glyphicon glyphicon-remove
 glyphicon glyphicon-zoom-in
 glyphicon glyphicon-zoom-out
 glyphicon glyphicon-off
 glyphicon glyphicon-signal
 glyphicon glyphicon-cog
 glyphicon glyphicon-trash
 glyphicon glyphicon-home
 glyphicon glyphicon-file
 glyphicon glyphicon-time
 glyphicon glyphicon-road
 glyphicon glyphicon-download-alt
 glyphicon glyphicon-download
 glyphicon glyphicon-upload
 glyphicon glyphicon-inbox
 glyphicon glyphicon-play-circle
 glyphicon glyphicon-repeat
 glyphicon glyphicon-refresh
 glyphicon glyphicon-list-alt
 glyphicon glyphicon-lock
 glyphicon glyphicon-flag
 glyphicon glyphicon-headphones
 glyphicon glyphicon-volume-off
 glyphicon glyphicon-volume-down
 glyphicon glyphicon-volume-up
 glyphicon glyphicon-qrcode
 glyphicon glyphicon-barcode
 glyphicon glyphicon-tag
 glyphicon glyphicon-tags
 glyphicon glyphicon-book
 glyphicon glyphicon-bookmark
 glyphicon glyphicon-print
 glyphicon glyphicon-camera
 glyphicon glyphicon-font
 glyphicon glyphicon-bold
 glyphicon glyphicon-italic
 glyphicon glyphicon-text-height
 glyphicon glyphicon-text-width
 glyphicon glyphicon-align-left
 glyphicon glyphicon-align-center
 glyphicon glyphicon-align-right
 glyphicon glyphicon-align-justify
 glyphicon glyphicon-list
 glyphicon glyphicon-indent-left
 glyphicon glyphicon-indent-right
 glyphicon glyphicon-facetime-video
 glyphicon glyphicon-picture
 glyphicon glyphicon-map-marker
 glyphicon glyphicon-adjust
 glyphicon glyphicon-tint
 glyphicon glyphicon-edit
 glyphicon glyphicon-share
 glyphicon glyphicon-check
 glyphicon glyphicon-move
 glyphicon glyphicon-step-backward
 glyphicon glyphicon-fast-backward
 glyphicon glyphicon-backward
 glyphicon glyphicon-play
 glyphicon glyphicon-pause
 glyphicon glyphicon-stop
 glyphicon glyphicon-forward
 glyphicon glyphicon-fast-forward
 glyphicon glyphicon-step-forward
 glyphicon glyphicon-eject
 glyphicon glyphicon-chevron-left
 glyphicon glyphicon-chevron-right
 glyphicon glyphicon-plus-sign
 glyphicon glyphicon-minus-sign
 glyphicon glyphicon-remove-sign
 glyphicon glyphicon-ok-sign
 glyphicon glyphicon-question-sign
 glyphicon glyphicon-info-sign
 glyphicon glyphicon-screenshot
 glyphicon glyphicon-remove-circle
 glyphicon glyphicon-ok-circle
 glyphicon glyphicon-ban-circle
 glyphicon glyphicon-arrow-left
 glyphicon glyphicon-arrow-right
 glyphicon glyphicon-arrow-up
 glyphicon glyphicon-arrow-down
 glyphicon glyphicon-share-alt
 glyphicon glyphicon-resize-full
 glyphicon glyphicon-resize-small
 glyphicon glyphicon-exclamation-sign
 glyphicon glyphicon-gift
 glyphicon glyphicon-leaf
 glyphicon glyphicon-fire
 glyphicon glyphicon-eye-open
 glyphicon glyphicon-eye-close
 glyphicon glyphicon-warning-sign
 glyphicon glyphicon-plane
 glyphicon glyphicon-calendar
 glyphicon glyphicon-random
glyphicon glyphicon-comment
 glyphicon glyphicon-magnet
 glyphicon glyphicon-chevron-up
 glyphicon glyphicon-chevron-down
 glyphicon glyphicon-retweet
 glyphicon glyphicon-shopping-cart
 glyphicon glyphicon-folder-close
 glyphicon glyphicon-folder-open
 glyphicon glyphicon-resize-vertical
 glyphicon glyphicon-resize-horizontal
 glyphicon glyphicon-hdd
 glyphicon glyphicon-bullhorn
 glyphicon glyphicon-bell
 glyphicon glyphicon-certificate
 glyphicon glyphicon-thumbs-up
 glyphicon glyphicon-thumbs-down
 glyphicon glyphicon-hand-right
 glyphicon glyphicon-hand-left
 glyphicon glyphicon-hand-up
 glyphicon glyphicon-hand-down
 glyphicon glyphicon-circle-arrow-right
 glyphicon glyphicon-circle-arrow-left
 glyphicon glyphicon-circle-arrow-up
 glyphicon glyphicon-circle-arrow-down
 glyphicon glyphicon-globe
 glyphicon glyphicon-wrench
 glyphicon glyphicon-tasks
 glyphicon glyphicon-filter
 glyphicon glyphicon-briefcase
 glyphicon glyphicon-fullscreen
 glyphicon glyphicon-dashboard
 glyphicon glyphicon-paperclip
 glyphicon glyphicon-heart-empty
 glyphicon glyphicon-link
 glyphicon glyphicon-phone
 glyphicon glyphicon-pushpin
 glyphicon glyphicon-usd
 glyphicon glyphicon-gbp
 glyphicon glyphicon-sort
 glyphicon glyphicon-sort-by-alphabet
 glyphicon glyphicon-sort-by-alphabet-alt
 glyphicon glyphicon-sort-by-order
 glyphicon glyphicon-sort-by-order-alt
 glyphicon glyphicon-sort-by-attributes
 glyphicon glyphicon-sort-by-attributes-alt
 glyphicon glyphicon-unchecked
 glyphicon glyphicon-expand
 glyphicon glyphicon-collapse-down
 glyphicon glyphicon-collapse-up
 glyphicon glyphicon-log-in
 glyphicon glyphicon-flash
 glyphicon glyphicon-log-out
 glyphicon glyphicon-new-window
 glyphicon glyphicon-record
 glyphicon glyphicon-save
 glyphicon glyphicon-open
 glyphicon glyphicon-saved
 glyphicon glyphicon-import
 glyphicon glyphicon-export
 glyphicon glyphicon-send
 glyphicon glyphicon-floppy-disk
 glyphicon glyphicon-floppy-saved
 glyphicon glyphicon-floppy-remove
 glyphicon glyphicon-floppy-save
 glyphicon glyphicon-floppy-open
 glyphicon glyphicon-credit-card
 glyphicon glyphicon-transfer
 glyphicon glyphicon-cutlery
glyphicon glyphicon-header
 glyphicon glyphicon-compressed
 glyphicon glyphicon-earphone
 glyphicon glyphicon-phone-alt
 glyphicon glyphicon-tower
 glyphicon glyphicon-stats
 glyphicon glyphicon-sd-video
 glyphicon glyphicon-hd-video
 glyphicon glyphicon-subtitles
 glyphicon glyphicon-sound-stereo
 glyphicon glyphicon-sound-dolby
 glyphicon glyphicon-sound-5-1
 glyphicon glyphicon-sound-6-1
 glyphicon glyphicon-sound-7-1
 glyphicon glyphicon-copyright-mark
 glyphicon glyphicon-registration-mark
 glyphicon glyphicon-cloud-download
 glyphicon glyphicon-cloud-upload
 glyphicon glyphicon-tree-conifer
 glyphicon glyphicon-tree-deciduous
 glyphicon glyphicon-cd
 glyphicon glyphicon-save-file
 glyphicon glyphicon-open-file
 glyphicon glyphicon-level-up
 glyphicon glyphicon-copy
 glyphicon glyphicon-paste
 glyphicon glyphicon-alert
 glyphicon glyphicon-equalizer
 glyphicon glyphicon-king
 glyphicon glyphicon-queen
 glyphicon glyphicon-pawn
 glyphicon glyphicon-bishop
 glyphicon glyphicon-knight
 glyphicon glyphicon-baby-formula
 glyphicon glyphicon-tent
 glyphicon glyphicon-blackboard
 glyphicon glyphicon-bed
 glyphicon glyphicon-apple
 glyphicon glyphicon-erase
 glyphicon glyphicon-hourglass
 glyphicon glyphicon-lamp
 glyphicon glyphicon-duplicate
 glyphicon glyphicon-piggy-bank
 glyphicon glyphicon-scissors
 glyphicon glyphicon-bitcoin
 glyphicon glyphicon-btc
 glyphicon glyphicon-xbt
 glyphicon glyphicon-yen
 glyphicon glyphicon-jpy
 glyphicon glyphicon-ruble
 glyphicon glyphicon-rub
 glyphicon glyphicon-scale
 glyphicon glyphicon-ice-lolly
 glyphicon glyphicon-ice-lolly-tasted
 glyphicon glyphicon-education
 glyphicon glyphicon-option-horizontal
 glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
 glyphicon glyphicon-modal-window
 glyphicon glyphicon-oil
 glyphicon glyphicon-grain
 glyphicon glyphicon-sunglasses
 glyphicon glyphicon-text-size
 glyphicon glyphicon-text-color
 glyphicon glyphicon-text-background
 glyphicon glyphicon-object-align-top
 glyphicon glyphicon-object-align-bottom
 glyphicon glyphicon-object-align-horizontal
 glyphicon glyphicon-object-align-left
 glyphicon glyphicon-object-align-vertical
 glyphicon glyphicon-object-align-right
 glyphicon glyphicon-triangle-right
 glyphicon glyphicon-triangle-left
 glyphicon glyphicon-triangle-bottom
 glyphicon glyphicon-triangle-top
 glyphicon glyphicon-console
 glyphicon glyphicon-superscript
 glyphicon glyphicon-subscript
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Как добавить иконки социальных сетей на сайт c Moodle

Если вы хотите добавить иконки социальных сетей на ваш сайт c Moodle без адаптации темы оформления, тогда «Font Awesome» — это лучшее решение.

Вы можете настроить цвет и размер иконок в соответствии со стилем вашего сайта.

Чтобы начать использовать Font Awesome на сайте, вам сначала нужно добавить CDN на ваш сайт. Для этого перейдите на страницу https://fontawesome.com/start и скопируйте оттуда следующий код:

 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

 

Затем этот код нужно вставить в раздел <head> HTML-кода вашего сайта. Чтобы сделать это в Moodle, вам необходимо войти на свой сайт как администратор, затем перейти к разделу «Администрирование сайта» -> «Внешний вид» -> «Дополнительный HTML» и вставить код в раздел «В тег HEAD», а затем нажать «Сохранить изменения».

Теперь вам нужно найти иконки, которые вы хотите использовать. Перейдите по ссылке https://fontawesome.com/icons?from=io и найдите нужные иконки.

Как только вы найдете нужную иконку, вам нужно скопировать строку кода. Код будет выглядеть примерно так:

 

<i class=»fab fa-vk»></i>

 

Этот код можно вставить в HTML-блок на вашем сайте (или в любом другом месте, где вы можете добавить код). Чтобы добавить блок HTML, необходимо включить режим редактирования на главной странице, затем в блоке «Добавить блок» выбрать «HTML».

 

 

После добавления HTML-блока перейдите к его настройке.

Прежде чем вставлять код в блок, сначала включите редактор HTML, щелкнув на значок, как на рисунке ниже.

 

 

После этого вставляем код нужной иконки.

 

 

Теперь нам нужно добавить ссылку, на которую пользователь будет переходить после нажатия на иконку. Для этого необходимо немного изменить код, который вы вставили. Для этого меняем буквы «i» на английские «a» и добавляем ссылку: href=»ссылка на вашу страницу». Сейчас код выглядит так:

 

 

Теперь можно выключить редактор HTML, снова нажав на кнопку «</>». Вы должны увидеть в блоке «Содержимое» нужную иконку:

 

 

Внешний вид иконки можно улучшить. Для этого мы будем использовать пользовательский CSS. Нажмите «Сохранить» и вернитесь на главную страницу сайта.

Чтобы посмотреть исходный код, вы можете использовать опцию «Инструменты разработчика», доступную в веб-браузере «Google Chrome». Для активации этой опции нажмите клавишу F12.

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

 

 

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

 

 

Сейчас нажмите точно на иконку VK. После этого вы должны увидеть такой код:

 

 

 

Скопируйте этот код.

То, как вы добавите пользовательский CSS в свою тему, будет зависеть от того, какую тему вы используете. В нашем примере мы будем использовать тему Clean, так для этой темы добавить пользовательский CSS немного проще, чем для темы Boost.  Выберите «Администрирование сайта» -> «Внешний вид» -> «Темы» -> «Clean». После этого нужно найти текстовое поле с надписью «Custom CSS». Примерно так же добавляется пользовательский CSS в большинстве тем оформления Moodle.

Вставьте скопированный код в это поле:

 

 

Так как иконка в CSS считается «шрифтом», чтобы увеличить ее, вы можете включить дополнительную строку в пользовательский CSS. Вы можете изменить значение на нужное вам, в этом примере мы используем размер шрифта (font size) 75 пикселей (75px).

 

 

Чтобы изменить цвет иконки, добавьте следующую строку в пользовательский CSS:

 

color: #597da3;

 

Набор символов #597da3 — это шестнадцатеричный код цвета (или hex-код), в данном случае это синий цвет VK. Вы можете подобрать любой цвет. В Интернет есть таблицы с цветами и даже палитры, где вы визуально выбираете цвет, а затем получаете код этого цвета.

 

 

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

 

 

Теперь вы можете повторить предыдущие шаги и добавить другие иконки.

Использование наборов бесплатных иконок на сайте

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

Большинство наборов содержат разбивку по категориям. Вы можете найти логотипы социальных сетей, платежных систем, CMS и именитых мировых компаний, например таких как: Apple, Android, Windows и множество других.

Библиотеки содержат иконки в различных форматах, что позволяет более тонко подойти к Вашим нуждам:

  • SVG (масштабируемая векторная графика, который позволяет масштабировать иконки без потери качества, до необходимого размера. при этом Вы имеете возможность изменять размер, цвет, тень и все, что можно сделать, с помощью CSS),
  • PNG ( растровый формат графики, позволяющий производить сжатие без потери качества, до определенной степени).

Вы можете сами выбрать какой формат использовать. Например SVG-формат. Некоторые коллекции уже встроены в такие фреймворки как Bootstrap, Foundation и другие.

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

  1. Вы скачиваете с сайта разработчика архив, содержащий необходимые материалы, и подключаете скачанные файлы, в одном из документов сайта, с помощью html, например:

    <link rel=»stylesheet» href=»/css/mfglabs_iconset.css»>

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

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

    <link rel=»stylesheet» href=»//maxcdn.bootstrapcdn.com/elusive-icons/2.0.0/css/elusive-icons.min.css»>

    Этот способ имеет свои преимущества. Для хранения и передачи файлов обычно используются CDN ( Content Delivery Network – сеть доставки контента) и даёт такие преимущества как:

  • снижение нагрузки на сервер → увеличение скорости загрузки страниц → увеличение и улучшение позиций сайта в поисковых системах;
  • определенная защита к DDoS атакам;
  • кэширование на удаленных серверах и выбор ближайшего к вам сервера, для передачи данных. Благодаря этому необходимые файлы быстро загружаются на Ваш сайт.

Вот мы и подключили библиотеку к сайту. Настало время использовать иконки для украшения сайта.

Для каждого набора существуют свои правила вывода необходимого материала на страницу. Мы рассмотрим на практике два основных способа использования:

1. Для Font Awesome необходимо вставить в нужном месте следующий код и получите результат:

<i aria-hidden=»true»></i>

Увеличение размера производиться с помощью добавления следующих классов: fa-2x, fa-3x, fa-4x и далее, по аналогии. В других подборках правила увеличения похожи, за исключением первых букв класса, которые обычно соответствуют аббревиатуре названия библиотеки иконок.

Так же в инструментарии Font Awesome присутствуют такие возможности как:

  • анимированые иконки;
  • рамка вокруг;
  • применение к спискам;
  • поворот;
  • наложение;
  • настраивыемый CSS.

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

2. Для OPENICONIC существуют сразу три основных способа и два способа для использования в фреймворках. Рассмотрим только 3 основных:

  • подключение в виде обычного изображения:
    <img src=»/open-iconic/svg/account-login.svg»>
  • подключение в виде SVG-спрайта:
    <svg viewBox=»0 0 8 8″><use xlink:href=»#account-login»></use></svg>
  • использование обычного inine-элемента с CSS-классом:
    <span data-glyph=»account-login»></span>

Бесплатные библиотеки иконок для сайта

На большинстве сайтов можно произвести поиск по набору, используя английские названия необходимых вам иконок (например: search или loop – иконка лупы, используемая для поиска на Вашем сайте).

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

Все представленные ниже подборки являются бесплатными, имеют открытую лицензию и позволяют использовать их в коммерческих или любых других целях:

  1. Font Awesome (fontawesome.io) — один из самых популярных и всеобъемлющих наборов — 675 шт.
  2. Foundation Icon Fonts 3 (zurb.com/playground/foundation-icon-fonts-3) — набор относящийся к Front-end фрэймворку Foundation — 283 шт.
  3. Elusive Icons (elusiveicons.com) — 304  шт.
  4. MFG Labs Icon set (hmfglabs.github.io/mfglabs-iconset/) — 260 шт.
  5. OPENICONIC (useiconic.com/open) — 223 шт.
  6. GLYPH (glyph.smarticons.co) — используется в Front-end фреймворке Bootstrap — 800 шт.
  7. IKONS (ikons.piotrkwiatkowski.co.uk) — 300 шт.
  8. Dripicons (demo.amitjakhu.com/dripicons) – 500 шт.
  9. Ionicons (ionicons.com) — 617 шт.
  10. Material icons (material.io/icons) — 900 шт.
  11. Entypo+ (entypo.com) — 411 шт.
  12. Icons8 (icons8.com) — 62,300 шт.
  13. Freepic (ru.freepik.com/free-icons) — 99,458 шт.
  14. Flaticon (flaticon.com) — 632,500 шт.
  15. IcoMoon (icomoon.io) — 550 шт.

Список составлен без какого-либо отношения к популярности или практичности библиотеки. Нет какого-либо разграничения и каждый найдёт свои прекрасные иконки, подходящие для реализации его цели.

Начните работу с Font Awesome

Настройка Font Awesome может быть такой же простой, как добавление двух строк кода на ваш сайт, или вы можете быть профессионалом и настройте МЕНЬШЕЕ самостоятельно! Font Awesome прекрасно работает даже с Bootstrap!

Добавьте на свой сайт Font Awesome + Bootstrap с помощью двух строк кода. Вам даже не нужно ничего скачивать или устанавливать!

  1. Вставьте следующий код в раздел HTML-кода вашего сайта.

    Хотите использовать Font Awesome без Bootstrap? Только не включайте первую строку.

  2. Похвалите себя за свои масштабируемые векторные иконки на веб-сайте решение дзюдо в двух строчках кода.
  3. Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Используйте этот метод, чтобы получить CSS Font Awesome по умолчанию с CSS Bootstrap по умолчанию.

  1. Скопируйте каталог font-awesome в свой проект.
  2. В вашего html укажите местоположение вашего font-awesome.min.css.
  3. Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Используйте этот метод для настройки Font Awesome и Bootstrap 2.3.2 с помощью LESS.

  1. Скопируйте каталог font-awesome в свой проект.
  2. Откройте файл bootstrap / bootstrap.less вашего проекта и замените с
      @import "путь / к / font-awesome / less / font-awesome.less";
  3. Откройте файл font-awesome / variables вашего проекта.less и отредактируйте переменную @FontAwesomePath , чтобы она указывала на каталог шрифтов.
      @FontAwesomePath: "../font";

    Путь к шрифту является относительным от вашего скомпилированного каталога CSS.

  4. Перекомпилируйте LESS, если используете статический компилятор. В противном случае все будет в порядке.
  5. Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Font Awesome работает без Bootstrap.

  1. Скопируйте каталог font-awesome в свой проект.
  2. Следуйте приведенным выше инструкциям и пропустите части Bootstrap.
  3. Откройте файл font-awesome.less или font-awesome.min.css своего проекта и отредактируйте расположение шрифта, чтобы он указывал на каталог шрифтов (см. Примеры выше).
  4. Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Font Awesome поддерживает IE7. Если вам это нужно, примите мои соболезнования.

  1. Get Font Awesome корректно работает в современном браузере.
  2. Скопируйте font-awesome-ie7.min.css в ваш проект.
  3. В вашего html укажите местоположение вашего font-awesome-ie7.min.css.
  4. Жалуйтесь тому, кто решил, что вашему проекту нужна поддержка IE7.

Font Awesome Intro

Основные значки

Чтобы использовать значки 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.



Как добавить иконки Font Awesome к кнопкам в Oxygen Builder

В этом уроке я покажу вам пошаговое руководство о том, как добавить значок font awesome к объекту кнопки в Oxygen Builder с помощью псевдоэлемента CSS: before. Фактически, эту процедуру можно использовать для добавления шрифтов значков из других коллекций, а также мы будем использовать Fontello — генератор шрифтов значков для получения требуемых шрифтов значков. Окончательный результат, который мы ищем, будет примерно таким:

Шаг 1. Загрузите ваши Icon Fonts

Первое, что нам нужно сделать, это загрузить шрифты, которые мы хотим использовать на нашем веб-сайте.Перейдите на http://fontello.com/, найдите шрифты значков, которые вам понадобятся для использования на своем веб-сайте, и загрузите их в виде zip-файла. В нашем случае нам нужен только значок телефона, поэтому найдите «телефон» и щелкните значок «телефон» Font Awesome, чтобы выбрать его, а затем нажмите кнопку «Загрузить веб-шрифт»:

Шаг 2 — Установите загруженный шрифт

Далее вам нужно будет установить шрифт, который вы скачали, на свой веб-сайт. Для этого нам необходимо скачать, установить и активировать плагин https: // tt.wordpress.org/plugins/elegant-custom-fonts/

Затем подключитесь к своему веб-сайту с помощью FTP, создайте в корневой папке папку с именем «fonts» и загрузите файл fontello.woff, извлеченный из загруженного zip-файла.

Затем перейдите в Настройки -> Шрифты на панели инструментов WordPress.

Нажмите кнопку «Добавить семейство шрифтов», дайте ему имя «Fontello», а затем нажмите кнопку «добавить @ font-face» и добавьте следующие сведения о весе шрифта, стиле шрифта и URL-адресе к файлу woff, который вы уже загрузили на сайт.Теперь ваше правило @ font-face должно выглядеть примерно так:

Шаг 3. Измените стили кнопок

Создайте свою кнопку, как обычно, так как это руководство посвящено добавлению значка Font Awesome к кнопке, я не буду вдаваться в подробности создания самой кнопки, но когда вам нужно, чтобы кнопка выглядела так, как вы этого хотите, нажмите кнопку и добавьте класс phone-num или другое описательное имя.

Затем убедитесь, что выбран новый назначенный вами класс, и нажмите кнопку состояния.Если в раскрывающемся списке отображается значок: до, выберите его, если нет, нажмите кнопку «Добавить состояние …», чтобы добавить его в список.

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

Первым делом поле «контент». Здесь вы помещаете Unicode значка, и вы можете получить его, вернувшись в извлеченную папку Fontello, которую вы сделали ранее, и щелкнув «демо».html «, который откроется в вашем веб-браузере. Затем нажмите на флажок» показать коды «, это покажет вам код, который вам нужно ввести, это последние 4 цифры, которым предшествует» \ «, в моем случае я хочу использовать значок телефона с юникодом 0xe800, поэтому я могу ввести его в поле содержимого как \ e800.

Второе, что вы должны изменить, это семейство шрифтов, выберите «Fontello» из выпадающего списка.

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

Начало работы с Font-Awesome

Все еще используете изображения для значков? Теперь на всех остальных веб-сайтах / веб-страницах мы находим интенсивное использование значков, чтобы помочь пользователям ориентироваться и легко понять цель. Мотив здесь заключается в том, чтобы сделать иконки простыми и понятными с точки зрения пользователя.Но использовать изображения для иконок? Было бы хорошо? Разве это не повлияет на производительность страницы, поскольку изображение имеет некоторый размер, правильно читатели? Позвольте представить вам небольшой обновленный, легкий и простой в использовании пакет, который делает графический интерфейс настолько простым в реализации. Давайте начнем.

Начало работы с Font-awesome

Как следует из названия, этот пакет великолепен. Из сообщения Github:

Это простой текст, которым можно легко управлять, как обычным текстом, с помощью шрифтов.Когда вы растягиваете или увеличиваете значок изображения (PNG), он становится размытым, на простом языке выглядит плохо. Если вы увеличите любой шрифт из пакета Fontawesome, он никогда не станет размытым или пиксельным. Более того, ширина и высота не требуются, поскольку они используются в изображениях в качестве атрибутов, просто увеличьте размер шрифта, он управляет значком. Лучше всего, что этот пакет можно загрузить из пакета Nuget или консоли диспетчера пакетов. На следующем изображении показано, как установить пакет из консоли PM.


Как вы можете видеть на предыдущем изображении, вам нужно перейти в окно консоли PM и нажать команду «Желтая установка». Install-Package font-awesome -Version 4.1.0 После установки вы можете столкнуться с ошибкой для пакета сборки. Это зависимости от этой библиотеки, и их версия может вызвать некоторые проблемы. Например, я столкнулся при добавлении в свой проект сборки Web.Optimization , поскольку для этой версии этой библиотеки требуется версия 1.1.3. Если какое-либо обновление пакета или обновление требуется в качестве его зависимостей, тогда без каких-либо колебаний просто обновите пакеты. Фактически, обновления для пакетов следует регулярно проверять и обновлять. После добавления в веб-проект будут добавлены следующие файлы и папки.


При добавлении / установке добавляются два файла CSS для font-awesome. Поразительно, но файлы такие же, почему? Потому что небольшая разница между ними обоими может иметь очень большое значение. Уменьшенная версия файла CSS — .min.css , он маленький, легкий и обеспечивает хорошую производительность. Таким образом, при добавлении ссылки в макет минимизированная версия является предпочтительной или фактически необходимой.


Другая добавленная вещь показана на предыдущем изображении. Давайте получим некоторую информацию о расширениях файлов внутри папки. Следующая информация взята из некоторой Wiki:

.eot: встроенные шрифты открытого типа — это компактная форма шрифтов OpenType, разработанная Microsoft для использования в качестве встроенных шрифтов на веб-страницах.

.svg: это широко распространено и известно, но все же масштабируемая векторная графика (SVG) — это формат векторных изображений на основе XML для двумерной графики с поддержкой интерактивности и анимации.

.ttf: разработан Apple, расшифровывается как шрифт True Type. Это означает, что шрифт можно масштабировать до любого размера, даже не влияя на качество.

.woff: означает формат открытого веб-шрифта. Это формат шрифта, который будет использоваться на страницах, отображаемых в Интернете, то есть веб-страницах.

.otf: означает шрифт открытого типа.

Все дело в расширениях файлов в папке.

Применение

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

Теперь, чтобы использовать класс из классов, определенных CSS, используйте следующее:

Как видно из предыдущего фрагмента, именно так классы fontawesome определены в теге .css файл. Класс fa определяется следующим образом:

  1. .fa {
  2. дисплей: строчно-блочный;
  3. семейство шрифтов: FontAwesome;
  4. стиль шрифта: обычный;
  5. font-weight: normal;
  6. line-height: 1;
  7. -webkit-font-smoothing: сглаживание;
  8. -moz-osx-font-smoothing: оттенки серого;
  9. }

fa-fw определяется следующим образом:

  1. .fa-fw {
  2. ширина: 1.28571429em;
  3. выравнивание текста: по центру;
  4. }
Это определения классов, определенных в CSS. Вы думаете, я пропустил fa-2x? Хорошо, ребята, есть fa-1x, fa-3x и другие, так как они представляют размер шрифта в упрощенном виде как 1em, 2em, 3em и тому подобное … Тогда фактический класс для значка должен использоваться вместе с теми, которые определяют его характеристики . Имя класса имеет префикс « fa -».Многие значки вместе с классами, которые можно использовать, приведены в ссылке / шпаргалке. Font Awesome Cheatsheet. Вы найдете много значков с именами их классов, которые можно использовать. Просто укажите имя, как показано ниже, и увидите значок на экране. Еще один факт: мы даже можем изменить цвет значка по своему усмотрению, используя аналогичное свойство цвета CSS.

Заключение

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

Ссылки

Почему мои значки Font Awesome отображаются в виде пустых квадратов?

Итак, вы решили использовать Font Awesome для создания отличных масштабируемых значков. Вы их скачиваете, возможно, используете Bootstrap CDN.

  • Ты не идиот, а получаешь только черные квадраты.
  • Вы смотрите на инструменты разработчика F12 и видите, что шрифты загружаются.
  • Вы супер продвинуты, поэтому вы проверяете правильность mime / types на вашем веб-сервере и подтверждаете их в заголовках HTTP.
  • Вы потратили полчаса, просто нажав CTRL-F5 и очистив кеш браузера.
  • Вы собираетесь кого-то ударить.
  • Вы пробуете разные браузеры, проверяете провод, читаете документы, гуглите с помощью bing, чтобы не кричать вслух.

Вздох.

Затем вы понимаете, что вам нужно иметь , а также любой класс значка.

Итак, не только

А на самом деле нужно

Тогда … работает.

Настоящим я объявляю это правило Foux du Fa Fa для Font Awesome и пишу об этом в блоге, чтобы не забыть.

Спонсор : Большое спасибо Telerik Icenium за спонсирование ленты на этой неделе! Создавайте и публикуйте приложения для iOS и Android с помощью Visual Studio, используя только HTML5 и JavaScript! Telerik Icenium теперь включает интеграцию с Visual Studio. Начать 30-дневную пробную версию с поддержкой сейчас !

О Скотте

Скотт Хансельман — бывший профессор, бывший главный архитектор в области финансов, теперь спикер, консультант, отец, диабетик и сотрудник Microsoft. Он неудавшийся комик-стендап, собиратель косичек и автор книг.


О рассылке новостей Хостинг от

Font Awesome руководство и полезные советы, о которых вы могли не знать.

Многие из вас, вероятно, хотя бы слышали о Font Awesome или, может быть, даже используют его ежедневно.

Но если вы не знаете об этом, Font Awesome — это потрясающая библиотека значков для Интернета с тысячами значков в разных стилях.

Он использует SVG для создания значков, но не волнуйтесь , вам не нужно ничего знать о SVG! Начнем тогда

Иконки FA имеют 4 стиля
  • Цельный
  • Обычный
  • Свет
  • Дуотон

Из них solid бесплатен большую часть времени, остальные доступны только в профессиональной версии.

Чтобы использовать любую функцию Font Awesome, сначала вам нужно включить эту строку в свой HTML-тег head .

Или уменьшенная версия
А вот как выглядит формула для значка

Значки всегда используют тег i , и все идет в атрибуте class .

Теперь, когда мы рассмотрели самые основы, позвольте мне показать вам некоторые действительно полезные функции, которые предоставляет вам Font Awesome!

Верно! FA позволяет изменять размер своих значков без использования CSS, создавая собственные классы, которые вам просто нужно добавить к значку


fa- # x классы доступны с 2-10 ( fa- [2-10] x ).Вот размер шрифта каждого класса


Разве так не проще?

Вы можете легко добавить значки перед элементами списка, добавив класс fa-ul к вашему списку и заключив значок в span с fa-li class 

  
    
  
  •   Значки списка могут 
    • 
  
  •   использовать для 
    • 
  
  •   заменить маркеры 
    • 
  
  •   в списках 
    •

Вы также можете вращать значки без использования свойства CSS transform , добавляя только еще один класс!

Вот что делают эти классы

Кроме того, добавляя только простой класс, FA предоставляет вам некоторые базовые анимации для добавления к вашим значкам, такие как spin ( fa-spin ) и pulse ( fa-pulse )

Для этого нужно просто добавить к родительскому элементу класс fa-stack , а внутри просто регулярно ставить иконки, вот так

Для следующих функций требуется JS-версия Font Awesome!
Включите это в тег head .

Или уменьшенная версия

Масштабирование влияет на размер значка без изменения или перемещения контейнера. Чтобы масштабировать значки вверх или вниз, используйте grow- # и shrink- # с любым произвольным значением, включая десятичные дроби.

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

Вот пример:

Позиционирование влияет на расположение значка без изменения или перемещения контейнера. Для перемещения значков вверх, вниз, влево или вправо используйте вверх - # , вниз - # , влево - # и вправо - # с любым произвольным значением, включая десятичные дроби.

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

Пример

Эта функция позволяет объединить 2 значка в 1, как при наложении.


Там мы объединили

с

Как это работает
В атрибуте class указано имя внутреннего значка , fas fa-Pencil-alt , как показано выше.В атрибуте data-fa-mask указано имя внешнего значка . В данном случае fas fa-comment

Вы можете добавить текст поверх значка.


  
     
     27 
  

  
     
     НОВИНКА

Вам нужно обернуть значок, например, в диапазон и добавить к нему класс fa-Layers .
Внутри него добавьте значок и еще один элемент span , содержащий текст, с классом fa-Layers-text .

Вы также можете добавить счетчик к значку. Хорошим примером является отображение количества полученных сообщений на значке конверта. 

  
     
     1419

Он работает так же, как наложение текста на значок, но вместо fa-Layers-text вам нужно добавить класс fa-Layers-counter .

Счетчик по умолчанию расположен в правом верхнем углу, но вы можете разместить его и в другом месте.

Может быть размещен с fa-Layers-bottom-left , fa-Layers-bottom-right , fa-Layers-top-left и fa-Layers-top-right по умолчанию. Текст переполнения обрезается многоточием.

Отлично, не правда ли?

Использование значков Font Awesome в Open edX

Иконки Font Awesome используются в Интернете.Вы, наверное, видели их тысячу раз и не знали и не заботились о том, что они из себя представляют. В этой статье мы точно рассмотрим, что это такое и как вы можете использовать их в своих курсах Open edX.

Прежде чем мы начнем, стоит отметить, что выполнение шагов, описанных в этой статье, требует очень небольшого количества знаний HTML, но вполне вероятно, что вы сможете следовать им, даже если никогда раньше не касались HTML или CSS. Имея это в виду, однако, ваш курс может выглядеть действительно плохо, если вы неправильно или чрезмерно используете такие значки, поэтому подумайте, когда вам следует использовать значок.Не закапывайте в них свои материалы просто потому, что можете.

Так как это длинная статья, вот что мы рассмотрим:

Часто задаваемые вопросы

Что такое Font Awesome?

Font Awesome — это широко используемая библиотека значков, которая используется во всем Интернете. Каждый раз, когда вы видите значок, скорее всего, он принадлежит Font Awesome или одному из его конкурентов. Здесь мы используем Font Awesome 4.7, потому что он используется в самом Open edX, и когда Font Awesome включен на странице, он доступен везде, в том числе в вашем контенте.Кроме того, из-за отсутствия лучшего выражения это круто.

Почему я должен использовать иконки Font Awesome?

Иконки

— это невероятно эффективный способ визуальной передачи информации, а также способ сокращения, который вы можете использовать на протяжении всего курса для общения с учащимся. Вы можете использовать их с большим эффектом для передачи часто повторяющейся информации, например, того, что ученик должен ожидать найти в следующем подразделе, или для привлечения их внимания к жизненно важному моменту.Они также просто более интересны и быстро заметны, чем текст — когда вы в последний раз видели указатель с надписью «Пожалуйста, притормози, в этом районе есть школьники» или «Есть риск падения камней на этот участок дороги. «?

Доступно ли использование значков?

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

Сколько кода мне нужно знать?

Немного … или много. Это действительно зависит от того, чем вы хотите заниматься. Просто вставить логотип в текст очень просто. Работа с размером, формой и даже интерактивностью этого логотипа более сложна и может потребовать дополнительных знаний CSS и HTML. Это не значит, что вы не можете использовать их без этих знаний, вы можете просто извлекать из них все больше и больше, чем больше у вас знаний.

Почему бы просто не использовать изображение?

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

Шаг 1. Поиск подходящего места для использования значка

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

  • Указатели: Обеспечение последовательного визуального обозначения того, что учащийся будет участвовать в задании. Это вариант использования, который мы собираемся продемонстрировать в этой статье, поскольку он часто наиболее полезен.
  • Узнаваемость бренда: Пока вы используете значок для обозначения этого бренда, вы можете использовать один из многих значков бренда в Font Awesome, чтобы выделить определенные бренды и инструменты, такие как Facebook, YouTube и GitHub.Это упрощает выделение знакомых инструментов с помощью логотипов, которые ваши учащиеся привыкли видеть.
  • Эстетика: Хотя значки не всегда используются наилучшим образом, вы можете использовать значки, чтобы сделать ваш курс более эстетичным, например, используя значки в качестве маркеров.

Шаг 2. Выбор значка

Как только вы узнаете, куда должен идти ваш значок, пора поискать в списке значков Font Awesome 4.7 нужный значок.

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

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

Мы скопируем это и перейдем к Open edX. К сожалению, это не так просто, как просто вставить этот код. Так что держите своих лошадей; наша работа еще не закончена.

Шаг 3. Вставка значка

Первое, что вам нужно сделать, чтобы вставить значок, — это подготовить компонент HTML и дождаться его.Поскольку это более сложная тема, мы не будем рассматривать ее здесь. Когда ваш компонент HTML будет готов, вам нужно будет получить доступ к редактору HTML, щелкнув HTML. Это предоставит вам HTML-код для вашего компонента.

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

Который мы затем вставляем в наше окно редактирования HTML в нужное нам место.Я хочу поместить этот значок в заголовок, поэтому помещаю его в свой тег

:

Как только код введен, нам нужно его изменить. Вместо использования тегов для этого мы будем использовать . Хотя использование является распространенным соглашением в последнее время на некоторых сайтах, это технически неправильный HTML (технически должен использоваться только для «альтернативного голосового» контента, такого как иностранные языки, на случай, если вам интересно). Переход на использование промежутков также немного упростит нашу жизнь для стилизации, поскольку мы не будем спорить с основным сайтом о том, следует ли выделять теги курсивом.Это означает, что код нашего значка теперь становится:

.

Говоря о споре с основным сайтом, нам нужно будет добавить что-то внутри этого тега span, иначе визуальный редактор имеет привычку быть полезным и удалять ваш span, потому что он считает его пустым. Сейчас мы просто добавим неразрывный пробел и для этого введем & nbsp; между открывающим и закрывающим тегами нашего диапазона. Это делает наш код примерно таким:

Что выглядит так в редакторе с моим текстом:

Обратите внимание, что после того, как вы нажмете OK, вы не увидите его в визуальном редакторе (так что будьте осторожны, работая с этим в будущем, вы можете случайно перезаписать его!), Но вы увидите его после нажатия кнопки «Сохранить».Вот мой после сохранения в Studio:

Выглядит неплохо! В LMS он будет выглядеть еще лучше, но прежде чем мы пойдем и взглянем на него, давайте сделаем его доступным.

Шаг 4: Сделайте его доступным

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

Прежде всего, давайте добавим описание к значку, который появляется при наведении указателя мыши. Это полезно для пользователей с нарушениями зрения или просто тех, кто забывает, что означает значок. Мы делаем это обратно в редакторе HTML, добавляя атрибут title следующим образом:

Далее нам нужно добавить эту информацию для программ чтения с экрана. Возможно, вы уже видели атрибут aria-hidden = «true» .Это полностью скроет значок от программ чтения с экрана, но мы все равно хотим, чтобы они знали информацию. Наряду с нашим диапазоном значков мы собираемся включить в него еще один диапазон с нашим текстом:

 
 Чтение:

Атрибут , который мы включили, — это класс, обеспечивающий доступность содержащегося в нем текста только для программ чтения с экрана. Повторяя то же описание, которое мы уже дали, мы гарантируем, что информация, которую представляет значок, доступна для всех.Обратите внимание, что мы ни в коем случае не заявляем, что это значок. Это бесполезная информация для кого-то, использующего программу чтения с экрана, и мы хотим дать им максимально удобную работу, просто указав, что означает значок .

Вот код из моего последнего примера:

Как только вы нажмете «Сохранить», вы должны заметить, что текст больше не отображается за пределами окна редактирования, он предназначен только для программ чтения с экрана. Подлый, а? На веб-сайте Font Awesome есть ряд рекомендаций по обеспечению доступности, если вы хотите глубже погрузиться в искусство использования значков с ограниченными возможностями.Вот наша окончательная версия после публикации в LMS, со всеми примененными стилями нашей темы и всплывающей подсказкой при наведении курсора мыши:

Мы в порядке, но что еще мы можем сделать с иконками визуально?

Шаг 5 (необязательно): Поэкспериментируйте с иконками

Поскольку со значками Font Awesome можно работать так же, как и с текстом, вы можете делать с ними практически все, что захотите. На веб-сайте Font Awesome есть несколько отличных примеров этого, но имейте в виду, что не все из них будут работать должным образом в Open edX без некоторых настроек.Вот несколько наших фаворитов и то, как их использовать в Open edX, в частности:

Увеличение значка

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

Сначала найдите код вашего значка. Вот мой из более раннего:

Все, что нам нужно сделать в атрибуте class, — это добавить fa-2x , fa-3x и так далее, вплоть до 5x (в 2,3 и 5 раз больше обычного размера, соответственно).В данном случае я собираюсь увеличить его в 3 раза, используя fa-3x . Это делает наш код:

Это слишком велико для нашего первоначального сценария использования этого кода, но вот как он выглядит в предыдущем примере, просто чтобы дать вам представление о том, какое влияние это оказало на нашу иконку раньше:

Использование значков в качестве маркеров в списках

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

Когда вы вставляете маркированный список, вы увидите, что ваш код выглядит примерно так:

 
    
    
  •  Списки 
    • 
    
  •  великолепны 
    • 
    
  •  для удобства чтения 
    • 
    
  •  и прочее 
    •

Допустим, в этом примере мы собираемся заменить все пули на зубчатые колеса. Мы определили, что это за значок, это fa-cog .Сначала мы добавляем class = «fa-ul» в наш неупорядоченный список (тег

    ), а также атрибут стиля, чтобы переопределить стиль базовой платформы, как показано в первой строке здесь:

     
      
    
    •  Списки 
      • 
    
    •  великолепны 
      • 
    
    •  для удобства чтения 
      • 
    
    •  и прочее 
      •

    Теперь внутри каждого элемента списка мы добавим значок, аналогично тому, как мы это делали ранее, за исключением дополнительного класса fa-li .Это дает нам окончательный код значка & nbsp; , чтобы значки располагались сбоку от текста, как маркеры. Мы эффективно скрытно заменяем их, сохраняя при этом наш контент в виде списка (что хорошо для доступности и читабельности). Вот наш список с этим кодом, добавленным к каждому элементу списка:

     
      
    
    •   & nbsp;  Списки 
      • 
    
    •   & nbsp;  великолепны 
      • 
    
    •   & nbsp;  для удобочитаемости 
      • 
    
    •   & nbsp;  и прочее 
      •

    Теперь список готов и красив, и в нашем контенте он будет выглядеть примерно так.Интереснее обычных пуль, не так ли?

    Заключение и примеры

    В целом, значки Font Awesome могут стать мощным визуальным дополнением к вашим курсам, а возможности их использования огромны, особенно в сочетании с использованием CSS. Если вы используете значки интересным образом, почему бы не написать нам письмо и не показать, что вы сделали? Нам бы очень хотелось увидеть, что вы с ними сделаете! Вот несколько предыдущих примеров, которые могут вам пригодиться:

    .

    No related posts.

Leave a Reply