帖子主题: 前端使用iocnfont字体图标

论坛级别: 学员
学术等级: 兼职
发帖:48
经验:33
鲜花:0
勋章:0
离线
发表于:Wed May 30 10:19:13 CST 2018

iconfont字体图标就是用字体来代替图标、图片文件的做法,并且通过字体图标可以对图标的大小、颜色等进行控制,但是缺点就是只能实现一种颜色,不能像图片那样含有各种颜色。

在咔拉商城的评论页面上有一些图标,本来是用图片来做的,但鼠标放上去没有效果,给人的体验不好,所以就去阿里巴巴矢量图标库找了一样的字体图标来做,可以对字体图标进行颜色,大小的修改。

咔拉商城评论为了给用户更好的体验,有下划线、字体居中,还有表情等选择。

那么怎么使用iconfont的图标了?

1.进入阿里巴巴矢量图标库,搜索自己想要的图标加入到购物车。

2.点击右上角的购物车图标,然后点击添加至项目,下载图标到本地。

3.在css 里引用iconfont图标,然后定义iconfont的样式,

4.还要引入iconfont.css这的样式文件。

5.挑选相应的图标编码,用在html的页面上。

画红色框的地方是必须要的。 这样前端就可以用自己所需要的字体图标了。

 
论坛级别:
学术等级:
发帖:47
经验:0
鲜花:0
勋章:0
离线
发表于:2018-06-13 16:36:51
淘宝,天猫最高优惠90%(购购买)http://www.GouGouMai.com搜一搜,免费领各种你想要的商品优惠券h
快速回复主题

前端使用iocnfont字体图标


    您尚未登录,发表回复前请先登录,或者 注册
  Ctrl+Enter直接发表