font-awesome开始使用font-awesome


备注

FontAwesome是一组600多个矢量图标。它在OFL / MIT -License下免费提供,可用于开源或商业项目。

基本示例:使用图标

简单的用例是指正常大小的单个图标: <i class="fa fa-camera-retro"></i> (在这个小提琴中查看结果。)

创建一个空标签(建议使用<i> 用于此)并指定类“ fa ”和与所需图标对应的类( 此处参见图标列表)。

建立

可以使用不同的方法将FontAwesome集成到网站中:

对于纯HTML / CSS:

  • 下载此处提供的zip,解压缩并将内容复制到您的网站。然后在网页head 引用/css/font-awesome.css ,如下所示:

    <link rel="stylesheet" src="/assets/font-awesome/css/font-awesome.css">
  • 使用CDN地址在网页head 引用它。其中一个地址是https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css 。要引用它,只需使用link 标记,但将源设置为CDN地址

对于包管理员:

大多数包管理器都支持Font Awesome作为包,下面是一些示例:

  • NuGet:只需搜索并安装Font-Awesome ,或在包控制台中运行以下命令: Install-Package FontAwesome
  • Ruby:只需运行此命令: gem install font-awesome-rails
  • npm:只需运行此命令: npm install font-awesome

使用Font Awesome

Font Awesome是一个非常简单但功能强大的库,可以用几个单词提供634个图标。

它是如何工作的? Font Awesome使用存储在../fonts 目录中的Unicode字符将任何i.fa 元素更改为相应的unicode字符,因此将图标显示为文本。

如何创建图标?所有图标类必须是i 元素或italic element ,主要用于最佳实践,但也提高了Font Awesome的性能。所有图标上都有类fa 。这表示一个图标, 没有它就无法工作 。在此之后,只需添加你想要的图标,与其他前缀fa- 。完成的示例如下:

<i class="fa fa-pencil"></i> 成为FA-铅笔

因为字体真棒使用unicode字符,它也允许任何文本操作也适用于它,例如font-sizecolor 等。