iconfont字体图标的使用方法--秒懂！

Gaby
684 阅读2分钟

iconfont自定义图标,非常强大!之前看了一波教程,觉得繁琐,弄明白后其实很简单的，很多时候都是被最初的想法给吓到了而已，或者写教程的人没有写清楚,现在就做个简单教程,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;

主角: iconfont+官网

注册登录

这个呢，就不说了，如果注册登录账号都是问题，那我觉得你就没必要再看下去了，还是先学下计算机基础的比较好，没别的意思，这个基本功就都默认你已经掌握了。

注册入口 就直接手机号注册吧，另外有GitHub账号、微博账号或者阿里域账号均可直接登录。

image.png

登录入口

image.png

创建项目

登录之后在首页菜单找到 资源管理--我的项目 , 点击进入

image.png

进入我的项目之后在右上角点击 新建项目图标 image.png

如图填写上项目名称和自己想要设置的图表前缀即可，该前缀为在项目中引用的时候所用的前缀，默认是icon-

image.png

项目已经创建好了，之后就需要往项目中添加图标了 image.png

添加图标到购物车

在网站顶部菜单，图标库 中，任意选择一个菜单进去，这里我们选择 官网图标

image.png

从官方图标库中选择一个进去选择自己所需要的图标，这里我们选择 Hippo Design 官方图标库

image.png

将鼠标放在对应图标上会显示添加购物车、收藏、下载的菜单，这里我们选择添加购物车，从购物车中可以将图标添加到项目中

image.png

这里我们选择browse图标

image.png

将购物车图标添加到项目中

选中的图标都会被虚线标记出来 image.png

进入到购物车，选择 添加至项目

image.png

选择自己刚刚创建的项目，并点击确定

image.png

下载项目到本地

此时在我的项目中可以看到从购物车中添加的图标，点击下载到本地这时就可以在项目中引用下载好的文件了

image.png

项目中引用

下载下来解压后的文件如下:

image.png

将下载好的文件都放在一个文件夹内，然后放在你的项目目录中,再在你的项目中引入iconfont.css文件

image.png

到了最后一步了,如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名:

image.png

image.png

添加好，刷新页面，就可以看到图标了，

image.png

avatar
文章
阅读
粉丝