40 lines
1.2 KiB
Markdown
40 lines
1.2 KiB
Markdown
|
---
|
|||
|
|
title: Fontawesome Icons For Bootstrap
|
|||
|
|
localeTitle: Bootstrap的Fontawesome图标
|
|||
|
|
---
|
|||
|
|
## Bootstrap的Fontawesome图标
|
|||
|
|
|
|||
|
|
Bootstrap（版本4）在其最新版本中删除了Glyphicon图标字体。 Fontawesome Icons为您提供超过675个图标，它们以字体格式显示。
|
|||
|
|
|
|||
|
|
#### 如何使用：
|
|||
|
|
|
|||
|
|
在您的html的`<head>`中包含对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图标列表：
|
|||
|
|
|
|||
|
|
[这里](http://fontawesome.io/cheatsheet/)提供了fontawesome提供的完整图标列表
|
|||
|
|
|
|||
|
|
`.fa fa-align-left`这是fontawesome align left图标。
|
|||
|
|
|
|||
|
|
`.fa fa-heart`这是一个很棒的心脏图标。
|
|||
|
|
|
|||
|
|
_注意：不要在HTML类属性中包含点，指的是带有点的类仅在调整CSS中的类时使用。_
|
|||
|
|
|
|||
|
|
#### 更多信息：
|
|||
|
|
|
|||
|
|
[Fontawesome Cheatsheet](http://fontawesome.io/cheatsheet/)
|