iconfont字体图标的使用方法

原创 zhou111222 教程 css3特效 331阅读 2017-12-25 10:16:03 举报

IconFont的作用就是用字体的格式来取代图片、特殊字体的展示,用得比较多的就是一些纯色的图标,具体主要由当前css3属性里的自定义字体(@font-face)来实现。

1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”;

2.选择完所有要用的图标后“添加至项目”,给它命名。然后在“图标管理-我的项目”中找到这个项目,查看在线代码,把里面的代码复制到CSS中。

3.每次添加图标都要重新生成@font-face代码,否则新图标不能使用。具体使用方法看教程1

第一步:拷贝项目下面生成的font-face

css 代码

第二步:定义使用iconfont的样式

css 代码

第三步:挑选相应图标并获取字体编码,应用于页面

css 代码

代码如下:

html 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复