你好,欢迎访问我的博客!登录 VIP视频 领券购物 免责声明 投稿本站 本站主题
当前位置:首页 - 笔记 - Web前端 - 正文 君子好学,自强不息!

Font Awesome图标字体下载以及使用方法

2016-12-03Web前端墨初2414°c
A+ A-

在网站的前端网页制作中,添加一些小图标可以使网页看起来更加的美观。如果你没有一些美工底子,又想弄一些漂亮的小图标来装饰你的网页,那么图示字体是一个不错的选择。

今天给大家推荐一款图标字体---Font Awesome

Font Awesome为我们提供可缩放的矢量图标,我们可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

Font Awesome下载与安装

下载Font Awesome图标字体,我们可以去它的官方网站下载,官方网站的下载地址在文章底部

下载方式,如下图所示,点击网页中的 Download 下载即可,如果下载不了可以转到Font Awesome的中文翻译网站下载

QQ截图20161203203033.png

下载Font Awesome图标字体压缩包后,解压我们得到“CSS”和“fonts”二个文件夹并把它们上传到网站服务器的CSS文件目录中

在网站的头部引用“CSS”文件夹中的“font-awesome.min.css”文件

使用图标

我们这里参考Font Awesome图标的中文翻译网站,链接同样在文章底部

你在可以在网页中想引用字体图标的地方添加以下代码

<i class="fa 图标名称"></i>

比如我想引用,下图中红色方框括起来的图标


QQ截图20161203205103.png

代码1:

<i class="fa fa-adn"></i>

代码2:

<i class="fa fa-android"></i>

代码3:

<i class="fa btc"></i>

通过上面的代码,可以看出应用图标字体非常的方便,只需要修改i标签的class类名为你所选的字体图标名即可,但有class中的"fa"类名是不能缺少的。我们还可以给图体字体添加更多的类属性,比如图标字体的大小,颜色,阴影等。

链接网址

Font Awesome官方网站 点击我进入

Font Awesome中文翻译网站 点击我进入

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
QR:  Font Awesome图标字体下载以及使用方法

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。


  登录