字体很棒6：完整评论

字体很棒是可扩展矢量图标的集合。可以使用CSS属性格式化图标，设置其颜色，大小，阴影等。字体版本5.5.0包括605个图标。

1如何安装字体很棒

方法1。

通过将以下代码添加到 部分：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

连接字体后，您可以使用网站上的图标。

方法2。

从字体上下载字体真棒。解开存档并将两个文件夹从档案服务器上传到站点服务器-CSS和字体。如果您的网站上已经有具有此类名称的文件夹，那么您只需要向其添加从下载文件夹的文件即可。

您可以使用该文件的完整或缩小版本：

<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">

2如何使用字体真棒图标

图标可以通过两种方式添加到网页中：通过为<i> 和<span> elements, 或者by adding them to the desired element using the :before, :after pseudo-elements 和the appropriate value of the content property.

  <i class="fa fa-home fa-fw"></i> li：{content：“ \ f015”;/ *添加家族图标 */font-fomily：fontawesome; color：#aaaaaa; margin-right：10px;}

1个标准图标

字体Awesome旨在与内联元素一起使用。为了添加图标，您首先需要将FA类设置为<i> 或者<span> 元素。

要在元素之前或之后添加所选图标，一个空<i></i> 或者<span></span> 元素被添加到分配图标类别的元素中，以及扩展样式的附加类。

  <i class="fa fa-camera-retro"></i>

2个大图标

为了增加图标相对于其容器的大小，请使用FA-LG（增加33％），FA-2X，FA-3X，FA-4X，FA-5X类。

  <i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>

3个固定宽度图标

Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation 或者lists on the site.

  <ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> 家</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> 图书馆</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> 申请</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> 设置</a ></li></ul>

4个图标列表

使用FA-UL和FA-LI类代替默认的子弹<ul>…</ul> 项目符号列表。

  <ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>项目清单</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>项目清单</li> <li><i class="fa-li fa fa-square"></i>项目清单</li></ul>

5个框架图标和报价

Use the fa-border class to set the border for the icon. The pull-right 和pull-left classes will add quotes to the text.

  <p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem Ipsum Dolor Sit Amet，Consectur adipiscing Elit。 Donec Nec Purus会众，Porta Sapien，位于Porta Sapien。在Sed Elit lectus中。 SED LACUS ELIT，SEMPER VITAE FELIS ID，SODALES COANUE SAPIEN。</p>

6个动画图标

添加FA-SPIN，FA-PULSE，FA-REFRESH，FA-COG类，以设置旋转图标。 IE8 -IE9中不支持动画。

  <i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>

7个转换图标

要旋转或翻转图标，请使用FA-ROTATE-*和FA-FLIP-*类。

  <i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>

8个组合图标

You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, 和fa-stack-2x for the enlarged size.

  <span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span>

  <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span>

  <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span>

  <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>

3 Font Awesome 4.5.0 collection, classes 和css code to insert using the content property

要旋转或翻转图标，请使用FA-ROTATE-*和FA-FLIP-*类。

4个相关资源

除了字体Awesome Collection，您还可以使用其他图标字体。

Fontello 具有大量各种图标字体。您可以选择自己喜欢的图标并将其下载到计算机上。

基金会图标是Foundation Framework开发人员的另一个图标字体集合。除标准图标外，该网站还具有圆形图标，社交媒体图标等。

材料图标是Google统一的平面图标，体现了易感性。图标旨在在所有通用平台和所有屏幕分辨率上进行优化的显示。

图标字体集合包含750多个图标。在您的网站上安装集合的最简单方法是使用Google Web字体之类的图标。为此，页面标记中包含以下代码：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

要正确显示浏览器字体，将使用图标字体的元素给出材料 - 元素类：

。字体重量：正常字体式：正常字体大小：24px; / *首选图标大小 */显示：内联块;宽度：1EM;身高：1EM;线高：1;文本转换：无；字母间隔：正常单词包裹：正常；白空间：nowrap;方向：ltr; -webkit-font-smoothing：抗血症； / *由所有webkit浏览器支持 */文本渲染：优化性； / * Safari和Chrome Support */ -Moz-Osx-Font-Smoothing：灰度； /* Firefox支持。 */ font-feature-settings：'liga'; /* IE支持。 */}

图标本身是使用<I class=''material-图标''>图标的结扎或HTML代码</i> 标签，例如：

<i class="material-图标">Account_Balance_Wallet</i><i class="material-图标"></i>

所有现代浏览器都可以理解结扎，即从版本10开始。图标代码是自动生成的，为此，您需要左键单击图标图像并复制建议的外观。

图标大小

图标大小 is controlled by additional classes:

.material-图标.md-12 {font-size：18px;} /* for<i class="material-图标 md-18"></i> */

.material-图标.md-24 {font-size：24px;} /* for<i class="material-图标 md-24"></i> */

.material-图标.md-36 {font-size：36px;} /* for<i class="material-图标 md-36"></i> */

.material-图标.md-48 {font-size：48px;} /* for<i class="material-图标 md-48"></i> */

图标颜色

图标的颜色还使用其他类别设置：

.material-图标.md-dark {颜色：rgba（0，0，0，0，0.54）;} /*<i class="material-图标 md-dark"></i> */

.matial-图标.md-light {颜色：rgba（255、255、255、1）;} /*<i class="material-图标 md-light"></i> */

.material-图标.md-dark.md-inative {color：rgba（0，0，0，0，0.26）;} /*<i class="material-图标 md-dark md-inactive"></i> * /

.material-图标.md-light.md-inative {颜色：rgba（255、255、255、0.3）;} /*<i class="material-图标 md-light md-inactive">脸</i> */

要设置自定义颜色，您需要添加一个定义图标颜色的类，例如：

.material-图标.indigo {颜色：＃1a237e;} /*<i class="material-图标 indigo"></i> */

常见问题

简单的字体很棒？

从本质上讲，它是带有图标的字体，可以添加到任何网页元素中以增强其可见性和设计。该系列由适合任何任务和目的的数百个图标组成。有关此链接的更多信息