iconfont字体图标的使用方法--超简单! 我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以
2017-10-08 09:00
1601 查看
iconfont字体图标的使用方法--超简单!
我之前因为项目用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,另一个是你想要的那个图标对应的类名:
具体代码如下:
好了,刷新页面,图标是不是出来了呢?
相关文章推荐
- 字体图标使用方法——以Iconfont为例
- 在SVG中使用Bootstrap或FontAwesome图标字体
- 阿里图标库 iconfont字体图标的使用方法
- webpack中使用iconfont字体图标的方法
- iconfont字体图标的使用方法
- Clementine 12.0 的使用(因为比较少用,项目中用到才开始接触写一下自己的使用方法)
- android使用Font Awesome字体图标
- 这段时间一直在做iconfont.cn这个平台。积累了些东西,记录下。 1.什么是iconfont? iconfont不是什么新技术了。 我们知道web网页能使用的字体一直很少,很多时候设计师用ps
- Font Awesome-为Bootstrap设计的图标字体
- iOS中iconfont(图标字体)的基本使用
- Iconfont 图标库在Android项目中的使用
- RN(react native)入坑指南-05,使用图标字体Fontawesome
- android中使用iconfont图标字体
- 如何在HTML中使用图标字体 - icon font?
- Android怎么使用字体图标 自定义FontTextView字体图标控件-- 使用方法
- android 使用字体图标(Icon Font)
- 为什么我们放弃css sprite使用iconfont字体图标
- 如何在HTML中使用图标字体 - icon font?
- 如何在HTML中使用图标字体 - icon font?
- 在android项目中使用FontAwesome字体