三步解决,阿里巴巴iconfont矢量图标在页面布局

三步解决iconfont图标布局

一、下载iconfont图标

1、http://www.iconfont.cn(iconfont官网)

①注册账号,推荐用其他社交账号直接登录。

②在页面下方选择自己需要的图标加入购物车。

③打开购物车

④添加至项目,并给你的项目起一个名字。

⑤下载至本地

2、把iconfont加入前端开发项目中

①重命名文件夹名称(可改可不改,主要是为了容易记&写)

②把文件夹剪切到项目根目录下

三、在项目中使用

(iconfont原理:看起来像图标,其实,在代码中他是以文字形式存在的,所以我们对,iconfont设置样式时,要把iconfont看做字体去设置。)

①打开font文件夹,找到demo.Unicode这个文件打开

②拷贝代码至CSS中

一定要修改URL的正确路径

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
  url('iconfont.woff') format('woff'),
  url('iconfont.ttf') format('truetype'),
  url('iconfont.svg#iconfont') format('svg');
}

 ③挑选相应图标并获取字体编码,应用于页面


 <p>&#xe63f;</p>

④在CSS设置样式 

p{
font-family:"iconfont";
font-size:16px;
color:red;
line-height:30px;
/*等其他样式*/

}

总结:iconfont在移动端和PC端使用越来越广泛了,通常常见的图标都是可以在iconfont.com中使用的,所以,写这篇文章希望能帮到大家。

至于为什么有那么多的小细节,源自想帮助初学者,让初学者或高手都能学会,才算上有价值的东西。忘了谁说的了,你能让傻子听明白你讲的东西,你才是牛X。

转载于:https://my.oschina.net/u/3911988/blog/1860268

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值