一、进入iconfont官网网站，到图标库选你喜欢的图标

iconfont官网

1.登录后进入图标库

HTLM5 | 如何将iconfont里的图标运用到自己的网站 – Vedio Talk-师魔法科技 - VLOG、科技、生活、乐分享

2.选择你喜欢的图标库

HTLM5 | 如何将iconfont里的图标运用到自己的网站 – Vedio Talk-师魔法科技 - VLOG、科技、生活、乐分享

3.把喜欢的图标统一选进购物车，可以多选。

HTLM5 | 如何将iconfont里的图标运用到自己的网站 – Vedio Talk-师魔法科技 - VLOG、科技、生活、乐分享

4.然后点击右上角购物车，下载代码

HTLM5 | 如何将iconfont里的图标运用到自己的网站 – Vedio Talk-师魔法科技 - VLOG、科技、生活、乐分享
HTLM5 | 如何将iconfont里的图标运用到自己的网站 – Vedio Talk-师魔法科技 - VLOG、科技、生活、乐分享

二、将下载好的代码解压

HTLM5 | 如何将iconfont里的图标运用到自己的网站 – Vedio Talk-师魔法科技 - VLOG、科技、生活、乐分享

三、找到你网站的CSS文件夹，把这些代码全部拷贝到进去

HTLM5 | 如何将iconfont里的图标运用到自己的网站 – Vedio Talk-师魔法科技 - VLOG、科技、生活、乐分享
HTLM5 | 如何将iconfont里的图标运用到自己的网站 – Vedio Talk-师魔法科技 - VLOG、科技、生活、乐分享

四、找到里面的demo_index.html 用浏览器打开可以预览图标

HTLM5 | 如何将iconfont里的图标运用到自己的网站 – Vedio Talk-师魔法科技 - VLOG、科技、生活、乐分享
HTLM5 | 如何将iconfont里的图标运用到自己的网站 – Vedio Talk-师魔法科技 - VLOG、科技、生活、乐分享

五、打开网站的index.html，引用代码

第一步：引入项目下面生成的fontclass代码：

<link rel=”stylesheet” type=”text/css” href=”css/iconfont.css”>

第二步加载图标：

<span class=”iconfont”></span>
HTLM5 | 如何将iconfont里的图标运用到自己的网站 – Vedio Talk-师魔法科技 - VLOG、科技、生活、乐分享
这里的 在demo_index.html预览界面可以看到
HTLM5 | 如何将iconfont里的图标运用到自己的网站 – Vedio Talk-师魔法科技 - VLOG、科技、生活、乐分享

六、运用成功后在网页即可显示

HTLM5 | 如何将iconfont里的图标运用到自己的网站 – Vedio Talk-师魔法科技 - VLOG、科技、生活、乐分享