Font Awesome图标的使用方法即图标调用方法
在浏览网站的时候,看到有些漂亮的图标,看起来很美观很协调,于是上网搜索一番后,才知道他们使用了一款叫“Font Awesome”的图标。今天抽空学习了一下使用方法,顺手做个笔记如下,以供后续使用图标时进行参考。
首先,我们了解一下Font Awesome,它其实是一套绝佳的图标字体库和CSS框架。Font Awesome字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。
要使用Font Awesome图标,请按如下方法在HTML页面的<head>与</head>之间添加引用下面的代码:
1、如果你是在国内,推荐国内 CDN代码如下:
<link rel=“stylesheet” href=“https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css”>
2、如果你是在海外,推荐海外 CDN代码如下:
<link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
其次,我们详细介绍Font Awesome图标的各种使用方法
1、图标的基本使用方法如下:
2、大图标的使用方法如下:
3、列表图标的使用方法
4、动态图标的使用方法
5、旋转和翻转的图标使用方法
6、堆叠的图标使用方法
7、固定宽度图标的使用方法
最后,通过对Font Awesome图标各种使用方法的了解和学习,我已基本掌握了使用技巧,在此将笔记分享出来,一则为后续使用提供查询,二则给有需要的小伙伴们学习参考。
发表评论