Iconfont在项目中的在线使用
第一次就写点简单的吧~我一开始还在笨头笨脑的下载字体图标的压缩包来用,但是碰上要修改增删某一个图标就要重新下载,十分麻烦。真的是被智商碾压,就知道肯定有可以在线使用的方法~现在就来balabala~哦对...只有使用方法,其他不涉及。
٩̋(ˊ•͈ ꇴ •͈ˋ)و
一、找图标加购物车
不用教吧都会。加购物车,像购物一样,毕竟大TB的库。
二、添加至项目
一般做项目,把需要的图标都存在一个项目文件夹里方便更新使用,而且可以和设计关联账号,我一般是让设计找图标的,直接去使用,毕竟我的眼睛跟设计的眼睛总是存在一些审美误差。
这是新建项目
三、打开我的项目(重点来了)
1.点击生成代码:
2.点击之后打开Font-class:
3.复制这段代码在浏览器打开:
以上这就是在浏览器中打开的代码的样子
4.将@font-face和.iconfont复制粘贴到你的css中
5.在上图位置添加http:即可在线获取
6.在HTML中的使用,复制图标中的代码字段
这里使用的是unicode下的代码。
HTML中:
在包裹字体图标代码的盒子上加class即可。
效果图
四、增删修改
项目中有添加新的字体图标需要使用时,每一次修改,都会生成新的代码,点击生成。
将新生成的@font-face覆盖之前的代码即可。切记要重新添加http:
新添票房图标,刷新覆盖@font-face.
html再次使用。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
好啦结束了,相比下载压缩包只需要修改一部分代码就可以了,是不是超级方便。
当然大神可以忽略 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚