iconfont字体图标的使用方法

转载于https://www.cnblogs.com/hjvsdr/p/6639649.html

我以前由于项目用bootstrap比较多,因此使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还能够自定义图标,很是强大!以前看了一波教程,以为繁琐,本身弄明白后感受如此简单,作了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;

step 1:百度iconfont,找到阿里巴巴矢量图标库官网,而后注册登陆,或者用github登陆也行,此步骤跳过;

step 2:找到图标管理->个人项目->而后新建项目:

右边点击新建项目,用于保存本身经常使用的图标;

step 3:项目新建完成后,往项目里添加咱们要想使用的图标,找到图标库,搜索一个想要的图标,而后添加到购物车;

 

 我如今将第一个安卓图标加入个人项目,点击加入购物车

step 4:添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择咱们刚刚建立的项目,肯定;

自动跳转到对应的项目里了,如图:

step 5:接下来一部比较关键,将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件;

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

强调一次,把上面这些文件都放在一个文件夹内，而后放在你的项目目录中,再在你的项目中引入iconfont.css文件

 

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

具体代码以下:

好了,刷新页面,图标是否是出来了呢?

Ok,到这一步,恭喜你成功了,是否是很简单,不简单?那就从头再看一遍;

调节字体图标的大小是经过元素的font-size属性来控制的;

tips：vue项目同上下载代码到本地以后在assets静态文件中引入，而后全局引入（main.js文件）iconfont.css；模板中写法和上面同样的。