Iconfont怎么用,阿里巴巴矢量图标网

什么是Icon Font

IconFont是用字体文件取代图片文件,来展示图标、特殊字体等元素的方法

Icon Font好处

它就是一种字体,字体上的颜色,大小属性相同使用;兼容ie6


怎么使用

介绍的是阿里巴巴矢量网的用法,登录http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.1 阿里巴巴矢量网,注册的注册登录的登录啊
搜索到想要的图标加入购物车,最好一次确认哪些图标,不然还要改
点击购物车


添加至项目,么有创建一个


点击更新代码

点击复制代码将代码放到css文件里



贴上代码复制改改对应图标的代码和名字就行了,下次增加时一样加入购物车添加项目并更新,将更新后的代码替换css文件中原来的代码

/*icon字体*/

@font-face {
  font-family: 'iconfont';  /* project id 326575 */
  src: url('//at.alicdn.com/t/font_8x27xux4fhepzaor.eot');
  src: url('//at.alicdn.com/t/font_8x27xux4fhepzaor.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_8x27xux4fhepzaor.woff') format('woff'),
  url('//at.alicdn.com/t/font_8x27xux4fhepzaor.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_8x27xux4fhepzaor.svg#iconfont') format('svg');
}

.iconfont {
  color: #f4f4f4;
  font-family: "iconfont" !important;
  font-size: 20px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-renzheng:before {
  content: "\e607";
}
.icon-youjiantou:before {
  content: "\e613";
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值