序文
日常开发网页中,我们可能会遇到各式各样的图标,如:返回键(一般款式为 <
),提示键(一般款式为一个 小灯泡
),目录(一般款式为一个 菜单状
)。
这些图标其实都能够通过各大矢量图标库 实现,今日我们要讲的阿里巴巴开发的 iconfont
便是一个图标库,大大方便了图标的运用。
️一、iconfont图标的介绍
光听“图标”,你可能认为,这不便是一张图吗?那用图片不是一个作用!这样想可就大错特错了❌。
实际上 iconfont
是一种字体,而这样的字体显示出来是各式各样的图标。
重点来了,已然它是字体,那么我们能够用常规修正文字的方法来修正 iconfont
图标,后边我将谈到这一点,让我们先看看怎么将 iconfont
图标增加到你的项目当中去 ↓
二、iconfont图标的增加
1. 进入iconfont官网并登录
官网跳转☞:iconfont官网
注册并登录。
2. 点击官方图标库
图示 ↓
3. 挑选图标库
挑选你想要的图标库,这儿我挑选了其中的一个 ↓
4. 挑选图标
挑选你想要的图标,单击图标上的购物车按钮,这个过程很像在商场里购物,不得不说阿里的设计师很有创意。
5. 将挑选的图标增加到项目
(1)点击右上角的购物车按钮
(2)点击增加到项目
(3)新建项目
新建成功,自动跳转到我的项目页面,挑选你自己建的项目,即可呈现方才你挑选的图标。
6. 下载项目压缩包
单击这儿下载整个项目的压缩包。
7. 解压压缩包,存放在网页文件夹中
- 压缩包名字为
download.zip
- 压缩包中会有一个文件夹包括你在
iconfont
网页中的那个项目 这儿主张把这个文件夹改成iconfont
,而且将这个文件夹拖到网页文件夹中,便于自己识别。
拖入网页文件夹 中。
iconfont
文件夹打开作用如下。
WARNING
⚠️
这儿面的文件不能动
8. 在html中包括iconfont
在 html
文件中的 head
标签内,运用以下代码,便能够通过类挑选器来运用 iconfont
图标了。
<link rel="stylesheet" href="./iconfont/iconfont.css">
三、运用iconfont
回到项目页面,在Font class中单击仿制代码。
这个代码其实便是图标中的第二行的类名。
想运用某个图标,在标签中输入 class="iconfont 类名"
即可,在这儿,我想运用第一个图标。
这个时候,网页中呈现我们类中的第一个图标
作用如下 ↓
四、修正iconfont款式
我们先运用一个类挑选器界说一个 CSS
款式。
在方才的class中加入这个类。
修正成功!
实际上关于文字的属性都能够用于 iconfont
图标的修正,因为 iconfont
图标本质上是文字,而不是图片❌!
⛵五、结束语
看了这么多,大家是不是对 iconfont
的简单运用有所了解了呢,期望能够帮助到你~
⭐Extra
指路作者的 CSDN
三角冻干咖啡的博客