40 lines
1.7 KiB
Markdown
40 lines
1.7 KiB
Markdown
|
---
|
|||
|
|
title: Fontawesome Icons For Bootstrap
|
|||
|
|
localeTitle: Fontawesome Icons для Bootstrap
|
|||
|
|
---
|
|||
|
|
## Fontawesome Icons для Bootstrap
|
|||
|
|
|
|||
|
|
Bootstrap (версия 4) отменил шрифт значков Glyphicon в их последнем выпуске. Fontawesome Icons предоставляют вам более 675 значков, они входят в формат шрифта.
|
|||
|
|
|
|||
|
|
#### Как использовать:
|
|||
|
|
|
|||
|
|
В `<head>` вашего html содержится ссылка на Font Awesome.
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Использование fontawesome аналогично использованию Glyphicon.
|
|||
|
|
|
|||
|
|
Просто создайте `<i>` или `<span>` и примените префикс CSS `fa` и имя значка. Пример кода приведен ниже.
|
|||
|
|
|
|||
|
|
**Пример кода:**
|
|||
|
|
|
|||
|
|
`<i class="fa fa-twitter" aria-hidden="true"></i>`
|
|||
|
|
|
|||
|
|
`<span class="fa fa-freecodecamp" aria-hidden="true"></span>`
|
|||
|
|
|
|||
|
|
#### Список значков Fontawesome:
|
|||
|
|
|
|||
|
|
Полный список значков, предоставленных fontawesome, доступен [здесь.](http://fontawesome.io/cheatsheet/)
|
|||
|
|
|
|||
|
|
`.fa fa-align-left` Это значок с выравниванием по левому краю.
|
|||
|
|
|
|||
|
|
`.fa fa-heart` Это знаковая иконка сердца.
|
|||
|
|
|
|||
|
|
_Примечание. Не включайте точку в атрибуте класса HTML, ссылаясь на классы с точкой, используется только при настройке классов в CSS._
|
|||
|
|
|
|||
|
|
#### Дополнительная информация:
|
|||
|
|
|
|||
|
|
[Fontawesome Cheatsheet](http://fontawesome.io/cheatsheet/)
|