Примеры использования Font Awesome
После того, как вы подключили Font Awesome к своему проекту, иконки можно вызывать с помощью тега <i>.
Некоторые примеры были позаимствованы из документации Bootstrap.
The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users
Пример: Базовые иконки fa-camera-retro
Вы можете разместить иконки Font Awesome в любом месте, используя в имени класса префикс fa и название иконки. Font Awesome разработан так, чтобы он мог быть использован в строковых элементах (мы любим использовать тег <i> так как он очень короткий, но использование тега <span> будет семантически более правильно).
<i></i> fa-camera-retro
- Пример: Базовые иконки Если вы меняете значение свойства font-size у контейнера иконок, то иконки станут больше.
Такое поведение происходит и с цветом, тенью и другими свойствами, которые могут наследоваться.
Такое поведение происходит и с цветом, тенью и другими свойствами, которые могут наследоваться.fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
Для увеличения размеров иконок в родительском элементе используйте классы fa-lg (увеличение на 33%), fa-2x, fa-3x, fa-4x, или
<i></i> fa-lg <i></i> fa-2x <i></i> fa-3x <i></i> fa-4x <i></i> fa-5x
- Если ваши иконки обрезаны сверху и снизу, то удостоверьтесь в правильном значении свойства line-height.
Главная Библиотека Приложения Настройки
Используйте класс fa-fw для того, чтобы задать фиксированную ширину иконкам.
Прекрасно подходит для тех случаев, когда различная ширина иконок мешает правильному выравниванию. Особенно полезно при использовании иконок в навигации и списках групп.
<div> <a href="#"><i aria-hidden="true"></i> Главная</a> <a href="#"><i aria-hidden="true"></i> Библиотека</a> <a href="#"><i aria-hidden="true"></i> Приложения</a> <a href="#"><i aria-hidden="true"></i> Настройки</a> </div>
- Иконки списков
- могут быть использованы
- как маркеры
- в списках
Используйте классы fa-ul и fa-li для быстрого удаления стандартных маркеров в ненумерованных списках.
<ul> <li><i></i>Иконки списков</li> <li><i></i>могут быть использованы</li> <li><i></i>как маркеры</li> <li><i></i>в списках</li> </ul>
…Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от
всего сердца… Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.
Используйте классы fa-border и fa-pull-right или fa-pull-left для выделения цитаты или подключения иконки статьи.
<i aria-hidden="true"></i> ...Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца... Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.
Пример загрузки (с fa-spinner icon) Пример загрузки (с fa-circle-o-notch icon) Пример загрузки (с fa-refresh icon) Пример загрузки (с fa-cog icon) Пример загрузки (с fa-spinner icon)
Используйте класс fa-spin, чтобы заставить вращаться любую иконку, и используйте класс fa-pulse, чтобы заставить вращаться иконку по 8 шагов. Также работает с классами fa-spinner, fa-refresh, и fa-cog.
<i></i> <span>Загрузка.
..</span>
<i></i>
<span>Загрузка...</span>
<i></i>
<span>Загрузка...</span>
<i></i>
<span>Загрузка...</span>
<i></i>
<span>Загрузка...</span>
На заметку: Анимация CSS3 не поддерживается в IE8 — IE9.
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
Чтобы произвольно поворачивать и зеркалить иконки, используйте классы fa-flip-*.
<i></i> normal<br> <i></i> fa-rotate-90<br> <i></i> fa-rotate-180<br> <i></i> fa-rotate-270<br> <i></i> fa-flip-horizontal<br> <i></i> fa-flip-vertical
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban на fa-camera
Чтобы сделать группу из иконок, используйте класс fa-stack для родителя, класс fa-stack-1x используйте для задания стандартного размера иконки, а класс fa-stack-2x для увеличенного. Класс fa-inverse может быть использован для присваивания альтернативного цвета иконке. Также вы можете использовать классы увеличения для управления размерами иконок.
<span> <i></i> <i></i> </span> fa-twitter на fa-square-o<br> <span> <i></i> <i></i> </span> fa-flag на fa-circle<br> <span> <i></i> <i></i> </span> fa-terminal на fa-square<br> <span> <i></i> <i></i> </span> fa-ban на fa-camera
Примеры для Bootstrap 3
Удалить Настройки
Font Awesome
Версия 4.
7.0
Font Awesome прекрасно работает со всеми компонентами Bootstrap.
<a href="#">
<i></i> Удалить</a>
<a href="#">
<i></i> Настройки</a>
<a href="#">
<i></i> Font Awesome<br>Версия 4.7.0</a>
<div>
<a href="#">
<i title="Align Left"></i>
</a>
<a href="#">
<i title="Align Center"></i>
</a>
<a href="#">
<i title="Align Right"></i>
</a>
<a href="#">
<i title="Align Justify"></i>
</a>
</div>
<div>
<span><i></i></span>
<input type="text" placeholder="Ваш Email">
</div>
<div>
<span><i></i></span>
<input type="password" placeholder="Пароль">
</div>
<div>
<a href="#"><i></i> Пользователь</a>
<a data-toggle="dropdown" href="#">
<span title="Toggle dropdown menu"></span>
</a>
<ul>
<li><a href="#"><i></i> Редактировать</a></li>
<li><a href="#"><i></i> Удалить</a></li>
<li><a href="#"><i></i> Забанить</a></li>
<li></li>
<li><a href="#"><i></i> Дать права администратора</a></li>
</ul>
</div>
Пользовательский CSS
Всё, что вы можете сделать со шрифтами с помощью CSS, вы сможете сделать и с Font Awesome.
Пример рейтинга (позаимствовано из CSS Tricks)
Общедоступность
Обновление… Сохранение. Держитесь крепче!
Уровень заряда: 50%
Немного о наших мыслях об общедоступности иконок. Если иконка используется для декорирования или отображения бренда, то они не должны быть объявлены общедоступно, тк они влияют на приложения, читающие сайты в слух. Если иконка передает смысл содержания текста в контексте интерфейса, то убедитесь в том, что этот смысл также передается и вспомогательными технологиями, дополнительным текстом или скрытым блоком.
<a href="path/to/settings" aria-label="Настройки"> <i aria-hidden="true"></i> </a> <a href="path/to/settings" aria-label="Удалить"> <i aria-hidden="true"></i> </a> <a href="#navigation-main" aria-label="Перейти к основному меню"> <i aria-hidden="true"></i> </a>
<i aria-hidden="true"></i> <span>Обновление.
..</span>
<i aria-hidden="true"></i>
<span>Сохранение. Держитесь крепче!</span>
<div> <span><i aria-hidden="true"></i></span> <input type="text" placeholder="Ваш email"> </div> <div> <span><i aria-hidden="true"></i></span> <input type="password" placeholder="Пароль"> </div>
<a href="path/to/shopping/cart" aria-label="Посмотреть 3 предмета в вашей корзине"> <i aria-hidden="true"></i> </a>
<i aria-hidden="true"></i> <span>Уровень заряда: 50%</span>
html — Использование иконочного шрифта icomoon, font-awesome и размеры блоков
Вопрос задан
Изменён 1 год 8 месяцев назад
Просмотрен 175 раз
Использую иконочный шрифт (ICOMOON).
Проблема заключается в том, что при размещении иконки в блоке div, он не подстраивается под размер самой иконки и занимает лишнее место. Как я понял c font-awesome такая же ерудна.
Мне кажется, что дело в line-height, но не до конца уверен. Каким образом можно пофиксить это?
Использую дефолтные стили браузера
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="fonts/font-icons.css" type="text/css">
</head>
<body>
<!--MY OWN SET - ICOMOON-->
<div>
<i></i>
</div>
<div>
<i></i>
</div>
</body>
</html>
CSS
.hello {
background-color: red;
margin-bottom: 20px;
font-size: 40px;
color: black;
}
.hello__icon {
background-color: antiquewhite;
}
. hello2 {
background-color: red;
margin-bottom: 20px;
color: black;
}
.hello__icon2 {
background-color: antiquewhite;
font-size: 40px;
}
hello2 {
background-color: red;
margin-bottom: 20px;
color: black;
}
.hello__icon2 {
background-color: antiquewhite;
font-size: 40px;
}
CSS из ICOMOON
i {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icons' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
- html
- css
- icon
- fontawesome
1
Нашел решение проблемы: задал для тега <i> display: block;
i {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icons' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
display: block;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Образец— Библиотека шрифтов значков
Шрифт значков CaGov включает 361 значок, которые вы можете использовать на своем сайте.
Четыре различных формата шрифта включены для совместимости со всеми популярными браузерами. Возможно, вам потребуется добавить карту пантомимы на ваш веб-сервер для шрифта WOFF. Чтобы определить, нужен ли он вашему веб-серверу, загрузите файл /fonts/CaGov.woff на свой веб-сервер. Попробуйте загрузить WOFF в свой браузер, посетив: http://yourwebsite.ca.gov/fonts/CaGov.woff. Если вам будет предложено загрузить шрифт, ваш сервер настроен правильно. Если вы получаете 404 или другую ошибку, вам нужно добавить карту пантомимы для расширения «.woff», а тип mime — «application/font-woff». Если вам нужна помощь, обратитесь к администратору сервера.
ca-gov-icon-logo
e600
ca-gov-icon-home
e601
ca-gov-icon-menu
e602
900 02 ca-gov-icon-appse603
ca-gov-icon-search
e604
ca-gov-icon-chat
e605
ca-gov-icon-capitol
e606
ca-gov-icon- состояние
e607
ca- gov-icon-phone
e608
ca-gov-icon-email
e609
ca-gov-icon-contact-us
e66e
ca-gov-icon-calendar
e60a
ca-gov-icon-bear
e60b
ca-gov-icon-cal-bear
e90b
ca-gov-icon-chat -bubble
e66f
ca-gov-icon-info-bubble
e670
ca-gov-icon-features
e993
ca-gov-icon-access способность
e992
ca-gov-icon -язык жестов
e971
ca-gov-icon-agriculture
e973
ca-gov-icon-cannabis
e974
ca-gov-icon-angry
e975
ca-gov-icon-happy
e976
ca-gov-icon-visa
e977
ca-gov-icon-mastercard
e978
ca-gov-icon-amexcard
e979
ca-gov-icon-discovercard
e97b
ca-gov-ic на PayPal
e97c
ca- gov-icon-apple-pay
e97a
ca-gov-icon-chrome
e97d
ca-gov-icon-firefox
e97e
ca-gov-icon-ie
e97f
ca-gov-icon-opera
e98 0
ca-gov-icon-safari
e981
ca-gov-icon-bell
e982
ca-gov-icon-bookmark
e983
ca-gov-icon-book
e086
900 02 ca-gov-icon-bookse984
ca-gov-icon-reader
e985
ca-gov-icon-read-book
e655
ca-gov-icon-palette
e986
ca-gov-icon-glass
e987
ca-gov-icon-heart
e988
9000 2 ca-gov-icon-digginge989
ca-gov-icon-gas-pump
e98a
ca-gov-icon-idea-alt
e98b
ca-gov-icon-medal
e98c
ca- gov-icon-курение
e98d
ca-gov-icon-no-smoking
e98e
ca-gov-icon-biohazard
e918
ca-gov-icon-malware
e919
ca-gov-icon-radiation
e955
ca-gov-icon-chemical-hazard
e956 900 03
ca-gov-icon-danger
e957
ca-gov-icon-do-not-sign
e958
ca-gov-icon-earthquake
e959
ca-gov-icon-quake-hazard
e 95b
ca-gov-icon -quake-house
e959
ca-gov-icon-electricity-hazard
e95c
ca-gov-icon-flood
e95d
ca-gov-icon-hazard
e95e
ca-gov-icon-hurricane
e95f
ca- gov-icon-подъем уровня моря
e960
ca-gov-icon-sea-level-rise-alt
e96e
ca-gov-icon-severe-weather
e961
ca-gov-icon-stop-fire 9000 3
e962
ок -gov-icon-stop-hand
e963
ca-gov-icon-tornado
e964
ca-gov-icon-tsunami
e965
ca-gov-icon-tsunami-alt
e96f
ca-gov-icon-volcano
e966
ca-gov-icon-tent 900 03
e969
ca-gov-icon-camfire
e96a
ca-gov-icon-dam
e96b
ca-gov-icon-hours
e90c
ca-gov-icon-hours-security
e90d
ca-gov-icon-альбомы
e90e
ca-gov-icon-brain
e90f
ca-gov-icon-certificate
e910
ca-gov-icon-certificate-check
e911
ca-gov-icon-charge
e912
ca-gov-icon-charge-cycle 9000 3
e913
значок ca-gov -charge-units
e914
ca-gov-icon-city
e915
ca-gov-icon-clock
e916
ca-gov-icon-cloud-gear 9 0003
e917
ca-gov -icon-cloud-services
e91a
ca-gov-icon-download-cloud
e96c
ca-gov-icon-upload-cloud
e96d
ca-gov-icon-cloud-sync
e91b
ca-gov-icon-code
e91c
ca-gov-icon-ear
e91d
ca-gov-icon-ear-slash
e91e
ca-gov-icon-eye
e91f
ca-gov-icon-eye-slash 90 003
e920
значок ca-gov -file
e921
ca-gov-icon-file-audio
e922
ca-gov-icon-file-certificate
e923
ca-gov-icon-file-check
e924
ca-gov-icon-file-code
e925
ca-gov-icon-file-csv 900 03
e926
ca-gov -icon-file-download
e927
ca-gov-icon-file-excel
e928
ca-gov-icon-file-export
e929
ca-gov-ic импорт в файл
e92a
ca-gov-icon-file-invoice
e92b
ca-gov-icon-file-medical
e92c
ca-gov-icon-file-medical-alt
e92d
ca-gov-icon-file-pdf
e92e
ca-gov-icon-file-powerpoint
e 92f
ca-gov -icon-file-prescription
e930
ca-gov-icon-file-upload
e931
ca-gov-icon-file-video
e932
ca-gov-icon -файл-слово
e933
ca-gov-icon-file-zip
e934
ca-gov-icon-filter
e90a
ca-gov-icon-filter-solid
e935
ca-gov-icon-fingerprint
e936
ca-gov-icon-fingerprint-check
e937
9 0002 ca-gov-icon-hande938
ca-gov-icon-hand-money
e939
ca-gov-icon-handshake
e93a
ca-gov-icon-institute
e93b
ca-gov-icon-medical-bubble
e93c
ca-gov-icon-medical-care
e93d
ca-gov-icon-medical-case
e93e
ca-gov-icon-medical-clinic
e93f
ca-gov-icon-medical-cross
e940
ca-gov-icon-medical-doctor
e941
ca-gov -icon-medical-heart
e942
ca-gov-icon-medical-pills
e943
ca-gov-icon-mobile
e944
ca-gov-icon -услуги
e945
ca-gov-icon-puzzle
e946
ca-gov-icon-puzzle-piece
e947
ca-gov-icon-recycle
e948
ca-gov-icon-responsive
e949
ca-gov-icon-responsive-alt
e9 4a
ca-gov-icon-security- сеть
e94b
ca-gov-icon-security-system
e94c
ca-gov-icon-shield-check
e94d
ca-gov-icon-thumb-up
е94е
ка- gov-icon-trophy
e94f
ca-gov-icon-users
e950
ca-gov-icon-users-alt
e951
ca-gov-icon-users-dialog
e952
ca-gov-icon-users-interaction
e953
ca-gov-icon-video
e954
ca-gov-icon-share-button
e671
ca-gov-icon-share-email
e673
ca-gov-icon-facebook 9 0003
e616
значок ca-gov -share-facebook
e672
ca-gov-icon-twitter
e619
ca-gov-icon-share-twitter
e675
ca-gov-icon-snapchat
e990
ca-gov-icon-share-snapchat
e98f
ca-gov-icon-linkedin
e617
ca-gov-icon-share -linkedin
e676
ca-gov-icon-youtube
e618
ca-gov-icon-share-youtube
e67b
ca-gov-icon-pinterest 90 003
e61a
значок ca-gov -share-pinterest
e679
ca-gov-icon-vimeo
e61b
ca-gov-icon-share-vimeo
e67a
ca-gov-icon-instagram
e61c
ca-gov-icon-share-instagram
e678 900 03
ca-gov-icon-flickr
e61d
ca-gov-icon-share-flickr
e674
ca-gov-icon-google-plus
e66d
ca-gov-icon-share-googleplus
e677
ca-gov- icon-правоприменение
e60c
ca-gov-icon-justice-legal
e60d
ca-gov-icon-at-sign
e60e
ca-gov-icon-attachment
e60f
ca-gov-icon-zip-file
e610 9000 3
ca-gov-icon-powerpoint
e611
ca-gov-icon-excel
e612
ca-gov-icon-word
e613
ca-gov-icon-pdf
e614
ca-gov-icon-share
e615
ca-gov-icon-microsoft
e61e
ca-gov-icon-apple
e61f
ca-gov-icon-android
e620
ca-gov-icon-computer
e621
ca-gov-icon-tablet
e622
ca-gov-icon-смартфон
e623
ca-gov-icon-roadways
e624
ca-gov-icon-travel-car
e625
ca-gov-icon-travel-air
e626
ca-gov -icon-грузовик-доставка
e627
ca-gov-icon-construction
e628
ca-gov-icon-bar-chart
e629
ca-gov-icon-pie-chart
e62a
ca-gov-icon-graph
e62b
ca-gov-icon-server
9 0002 e62cca-gov-icon-download
e62d
ca-gov-icon-cloud-download
e62e
ca-gov-icon-cloud-upload
e62f
ca-gov-icon-shield
e630
значок ca-gov -fire
e631
ca-gov-icon-бинокль
e632
ca-gov-icon-compass
e633
ca-gov-icon-sos
e634
ca-gov-icon-shopping-cart
e635
ca-gov-icon-video-camera 900 03
e636
значок ca-gov -камера
e637
ca-gov-icon-green
e638
ca-gov-icon-loud-speaker
e639
ca-gov-icon-audio 9 0003
e63a
значок ca-gov -print
e63b
ca-gov-icon-medical
e63c
ca-gov-icon-zoom-out
e63d
ca-gov-icon-zoom-in
e63e
ca-gov-icon-important
e63f
ca-gov-icon-chat-bubbles 90 003
e640
значок ca-gov -call
e641
ca-gov-icon-people
e642
ca-gov-icon-person
e643
ca-gov-icon-user-id
e644
значок ca-gov -платежная карта
e645
ca-gov-icon-skip-backwards
e646
ca-gov-icon-play
e647
ca-gov-icon-pause
e648
ca-gov-icon-skip-forward
e649
ca-gov-icon-mail
e64a
ca-gov-icon-image
e64b
ca-gov-icon-house
e64c
ca-gov-icon-gear
e64d
ca-gov-icon-tool
900 02 e64eca-gov-icon-time
e64f
ca-gov-icon-cal
e650
ca-gov-icon-check-list
e651
ca-gov-icon-document
e652
ca-gov-icon-clipboard
e653
ca-gov-icon-page
e6 54
ca-gov-icon-cc-copyright
e656
ca-gov-icon-ca-capitol
e657
ca-gov-icon-ca-state
e658
ca-gov-icon-favorite
90 002 e659ca-gov-icon- rss
e65a
ca-gov-icon-road-pin
e65b
ca-gov-icon-online-services
e65c
ca-gov-icon-link
e65d
ca-gov-icon-magnify-glass
e65e
ca-gov-icon-key
9 0002 e65fca-gov-icon-lock
e660
ca-gov-icon-info
e661
ca-gov-icon-arrow-up
e04b
ca-gov-icon-arrow-down
e04c
значок ca-gov -стрелка-влево
e04d
ca-gov-icon-стрелка-вправо
e04e
ca-gov-icon-carousel-prev
e666
ca-gov-icon-carousel-next т
e669
ca-gov -icon-menu-toggle-closed
e66a
ca-gov-icon-menu-toggle-open
e66b
ca-gov-icon-carousel-play
e907
9 0002 ca-gov-icon-carousel -pausee66c
ca-gov-icon-search-right
55
ca-gov-icon-выпускник
e903
ca-gov-icon-briefcase
e901
ca-gov-icon-images
e904
ca-gov-icon-gears
9 0002 e900ca-gov-icon-tools
e035
ca-gov-icon-pencil
6a
ca-gov-icon-pencil-edit
6c
ca-gov-icon-science
e00a 90 003
ca-gov-icon-film
e024
ca-gov-icon-table
e025
ca-gov-icon-flowchart
e0df
ca-gov-icon-building
e0fd
ca-gov-icon-searching
e0f7
ca-gov-icon-wallet
90 002 e0d8теги ca-gov-icon
e07c
ca-gov-icon-currency
e0f3
ca-gov-icon-idea
e902
ca-gov-icon-lightbulb
e072 9 0003
ca-gov-icon-calculator
e0e7
ca-gov-icon-drive
e0e5
ca-gov-icon-globe
e0e3
ca-gov-icon-песочные часы
e0e1
ca-gov-icon-mic
e07f
ca-gov-icon-volume
900 02 e069ca-gov-icon-music
e08e
ca-gov-icon-folder
e05c
ca-gov-icon-grid
e08c
ca-gov-icon-archive
e088 900 03
ca-gov-icon-контакты
e087
ca-gov-icon-drawer
e084
ca-gov-icon-map
e083
ca-gov-icon-pushpin
e082
ca-gov-icon-location
e081
ca-gov-icon-quote-fill
e 06a
ca-gov-icon-вопрос- fill
e064
ca-gov-icon-warning-triangle
e063
ca-gov-icon-warning-circle
e967
ca-gov-icon-warning- квадрат
e968
ca- gov-icon-warning-fill
e062
ca-gov-icon-check-fill
e052
ca-gov-icon-close-fill
e051
ca-gov-icon-plus-fill
e050
ca-gov-icon-minus-fill
e04f 9000 3
ca-gov-icon- вставка-вставка-справа
e046
ca-gov-icon-caret-fill-left
e045
ca-gov-icon-caret-fill-down
e044
ca-gov -иконка-каре- заполнение
e043
ca-gov-icon-caret-fill-two-right
e04a
ca-gov-icon-caret-fill-two-left
e049
ca-gov-icon-caret-fill-two-down
e048
ca-gov-icon-caret-fill-two-up
e047
ca-gov- значок-стрелка-заполнить -right
e03c
ca-gov-icon-arrow-fill-left
e03b
ca-gov-icon-arrow-fill-down
e03a
ca-gov-icon-arrow- пополнение
e039
ca-gov-icon-arrow-fill-left-down
e040
ca-gov-icon-arrow-fill-right-down
e03f
ca-gov-icon-arrow-fill-right-up
e03e
ca-gov-icon-arrow-fill-left-up
e03d
ca-gov-icon-triangle-line-right
49
ca-gov-icon-triangle-line-left
48
ca-gov-icon-triangle-line-up
46
ca-gov-icon-triangle-line-down 9000 3
47
ca-gov-icon-caret-line-two-right
41
ca-gov-icon-caret-line-two-left
40
ca-gov-icon-caret-line-two- вниз
3f
ca-gov-icon-caret-line-two-up
3e
ca-gov-icon-caret-line-right
3d
ca-gov-icon-caret- линия слева
3c
ca-gov-icon-caret-line-up
3a
ca-gov-icon-caret-line-down
3b
ca-gov-icon-important-line
е906
ca-gov-icon-info-line
e905
ca-gov-icon-check-line
52
ca-gov-icon-question-line
e908
ca-gov-icon-close-line
51
ca-gov-icon-plus-line
50
ca-gov-icon-minus-line
4f
ca-gov -icon-question
e909
ca-gov-icon-minus-mark
4b
ca-gov-icon-plus-mark
4c
ca-gov-icon-collapse
58
ок -gov-icon-expand
59
ca-gov-icon-check-mark
4e
ca-gov-icon-close-mark
4d
ca-gov-icon-triangle-right
45
ca-gov-icon-triangle-left
44
ca-gov-icon-triangle-down
43
ca-gov -icon-triangle-up
42
ca-gov-icon-caret-two-right
39
ca-gov-icon-caret-two-left
38
ca- gov-иконка-каре -two-down
37
ca-gov-icon-caret-two-up
36
ca-gov-icon-caret-right
35
ca-gov-icon-caret-left
34
ca-gov-icon-caret-up
32
ca-gov-icon-caret-down
33
ca-gov- icon-expand-all
e991
ca-gov-icon-collapse-all
e970
ca-gov-icon-drag
e972
ca-gov-icon-update
e994
Для вставки значок на вашу страницу, вставьте пустой тег span с именем класса для значка, который вы хотите использовать, например:
Когда значки используются с заголовками от h2 до H5 и некоторыми предварительно настроенными модулями, включаются стили для размера шрифта и цвета.
При использовании где-либо еще вам нужно будет самостоятельно добавить стили для размера и цвета шрифта. Иконочные шрифты могут быть оформлены с использованием тех же правил css, которые используются для оформления любого другого текста на странице. Например, color: и font-size: измените цвет и размер значка.
Что такое иконочный шрифт? — Создание шрифтов значков для Интернета Видеоруководство
Из курса: Создание иконочных шрифтов для Интернета
Что такое иконочный шрифт?
“
Я понимаю, что некоторые из вас, просматривающих этот курс, возможно, никогда раньше не использовали иконочный шрифт.
Если вы новичок в них, вы можете спросить себя, что же такое иконочный шрифт и что в них такого особенного? Для вас, ребята, я хочу воспользоваться моментом и дать вам краткий обзор того, что такое иконочные шрифты. И если вы уже использовали их какое-то время или знакомы с ними, вы можете смело идти вперед и пропустить этот фильм, если хотите. Таким образом, иконочные шрифты — это просто еще один способ отображения значков в ваших приложениях и на веб-сайтах. В прошлом эта задача в основном возлагалась на форматы изображений, такие как GIF и PNG, и тогда изображение просто отображалось на странице. С годами у нас появились некоторые методы, такие как спрайты CSS, которые сделали этот процесс немного более эффективным. Но использование изображений для иконок обычно приводит к дополнительным запросам к серверу. И качество изображения, вероятно, пострадает, если значок масштабируется, потому что они зависят от разрешения, что делает их очень плохими для адаптивного дизайна. Чтобы решить эту проблему, дизайнеры обратились к более старому решению — шрифтам.
Пока мы создаем шрифты, мы храним в них символы. Например, вы, вероятно, хорошо знакомы со шрифтом, который я сейчас пролистываю. Это Виндингс. Это было вокруг в течение долгого времени. И вы, вероятно, сами использовали пару этих символов, по крайней мере, один или два раза. Что ж, с расширением поддержки веб-шрифтов в браузерах было фактически неизбежно, что кому-то в конце концов придет в голову идея начать использовать значки и символы через шрифты в Интернете. Таким образом, иконочный шрифт ничем не отличается от обычного шрифта. И я собираюсь переключиться на иконочный шрифт, который вы, ребята, будете создавать в этом курсе, чтобы вы могли как бы увидеть, что мы собираемся делать. Как я уже говорил, иконочный шрифт ничем не отличается от обычного шрифта. Единственная разница в том, что вместо буквы, сопоставленной с символом или областью Unicode, у вас будет символ, подобный этому. Теперь каждый шрифт значка немного отличается, и стратегия, используемая для сопоставления значков с конкретными символами, будет определять, как этот шрифт используется.
Если, например, значок сопоставлен с определенным символом, например, h здесь для дома, все, что вам нужно сделать, чтобы отобразить его, — это ввести соответствующую букву. Затем убедитесь, что в вашем CSS этот шрифт значка используется для его семейства шрифтов. На самом деле чаще можно найти значки, сопоставленные с определенными символами Unicode, которые избегают использования основных латинских символов. Теперь это могут быть обычные символы символов или часть того, что известно как область частного использования Unicode. Вы можете увидеть пример этого здесь. У нас есть абзац с классом icon-heart. А затем в CSS мы используем псевдо-селектор before, чтобы сказать: «Эй, продолжайте и отобразите эту конкретную кодировку символов, 2661, которая в данном случае является символом сердца, поэтому она будет показывать сердце». Теперь, когда вы сопоставляете эти символы, это могут быть обычные символы символов, как вы видите здесь с этим сердцем, или они также могут быть частью так называемой области частного использования Unicode.