看到简书官网，使用了一些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>

效果如下：

每天都努力一点
谢谢你看完