学习笔记--Font Awesome图标的使用方法即图标调用方法

原创 Jack  2018-11-21 阅读 1096 次 评论 0 条
摘要导读

原标题:学习笔记--Font Awesome图标的使用方法即图标调用方法

在浏览网站的时候,看到有些漂亮的图标,看起来很美观很协调,于是上网搜索一番后,才知道他们使用了一款叫“Font Awesome”的图标。今天抽空学习了一下使用方法,顺手做个笔记如下,以供后续使用图标时进行参考。首先,我们了解一下Font Awesome,它其实是一套绝佳的图标字体库和CSS框架。Font Awesome字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。要使用Font Awesome图标,请参考下文Font Awesome图标的使用方法即图标调用方法

Font Awesome图标的使用方法即图标调用方法

在浏览网站的时候,看到有些漂亮的图标,看起来很美观很协调,于是上网搜索一番后,才知道他们使用了一款叫“Font Awesome”的图标。今天抽空学习了一下使用方法,顺手做个笔记如下,以供后续使用图标时进行参考。

首先,我们了解一下Font Awesome,它其实是一套绝佳的图标字体库和CSS框架。Font Awesome字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

conew_20181117165912.jpg

要使用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、图标的基本使用方法如下:

Font Awesome图标的基本使用方法

2、大图标的使用方法如下:

Font Awesome大图标的使用方法

3、列表图标的使用方法

Font Awesome列表图标的使用方法

4、动态图标的使用方法

Font Awesome动态图标的使用方法

5、旋转和翻转的图标使用方法

Font Awesome旋转和翻转图标的使用方法

6、堆叠的图标使用方法

Font Awesome堆叠的图标的使用方法

7、固定宽度图标的使用方法

Font Awesome固定宽度图标的使用方法

最后,通过对Font Awesome图标各种使用方法的了解和学习,我已基本掌握了使用技巧,在此将笔记分享出来,一则为后续使用提供查询,二则给有需要的小伙伴们学习参考。

本文地址:https://sxger.com/blog/42.html
版权声明:本文为 盛星阁 原创文章,版权归 Jack 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?