iconfont 图标转为字体_iconfont-字体图标

看到简书官网，使用了一些iconfont-字体图标。素色，纯色，体积小，尝试把它使用到我的博客项目中。

简书官网的一部分

第一步：###

阿里巴巴矢量图

第二步：###

搜索你分类的关键字---然后加入购物车，这个是免费的

搜索“新闻”相关图标

第三步：下载到本地###

下载代码

下载到本地，然后解压。会将合并后的字体文件及自动生成的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- */

}

第五步：###

把下载好的文件导入我们的工程里，如图

然后即可引用刚生成的字体图标代码如下：

引入:

修改后代：

写文章

效果如下：

详情访问此处

每天都努力一点

谢谢你看完