看到简书官网，使用了一些iconfont-字体图标。素色，纯色，体积小，尝试把它使用到我的博客项目中。
简书官网的一部分
第一步：###
首先进入阿里巴巴矢量图网站：http://www.iconfont.cn/
阿里巴巴矢量图
第二步：###
搜索你分类的关键字---然后加入购物车，这个是免费的
搜索“新闻”相关图标
第三步：下载到本地###
下载代码
下载到本地，然后解压。会将合并后的字体文件及自动生成的css全部下载
解压后的文件
第四步：修改CSS文件###
默认的CSS文件
@font-face {font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
/*购物车里的图标*/
.icon-brush:before { content: "\e602"; }
.icon-fountain_pen:before { content: "\e605"; }
.icon-thumbs_up:before { content: "\e609"; }
- 为保证和我们的工程目录结构统一，建议将字体文件放在fonts目录下，这样我们需要修改@font-face下得url属性， src: url('../fonts/iconfont.ttf')
@font-face {font-family: 'iconfont';
src: url('../fonts/iconfont.eot'); /* IE9*/
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
第五步：###
把下载好的文件导入我们的工程里，如图
然后即可引用刚生成的字体图标代码如下：
引入:
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
修改后代：
<a >
<span class=" iconfont icon-brush"></span>
<span class="write">写文章</span>
</a>
效果如下：
详情访问此处
每天都努力一点
谢谢你看完
