三步解决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></p>
④在CSS设置样式
p{
font-family:"iconfont";
font-size:16px;
color:red;
line-height:30px;
/*等其他样式*/
}
总结:iconfont在移动端和PC端使用越来越广泛了,通常常见的图标都是可以在iconfont.com中使用的,所以,写这篇文章希望能帮到大家。
至于为什么有那么多的小细节,源自想帮助初学者,让初学者或高手都能学会,才算上有价值的东西。忘了谁说的了,你能让傻子听明白你讲的东西,你才是牛X。