做站久了，你会发现一个很头疼的事。

以前用图片做图标，加载慢，还模糊。

特别是现在手机屏幕那么清晰，那些小图标看着像马赛克，很掉价。

我也踩过这个坑。

后来听同行推荐，说用字体图标好。

试了一下，真香。

但是，对于还在用织梦（DedeCMS）的老系统来说，配置起来确实有点麻烦。

很多新手朋友问我，到底咋弄？

今天我就把压箱底的经验，掏心窝子跟你们聊聊。

别整那些虚的，直接上干货。

首先，你得明白啥是字体图标。

简单说，它不是图片，是文字。

只不过这个文字长得不像字，像个图标。

因为它是矢量图，所以不管你怎么放大缩小，边缘都是平滑的。

这对SEO也有好处，毕竟搜索引擎能读懂文字嘛。

而且，加载速度那是真快。

几个KB搞定一堆图标，比加载几十张PNG强多了。

那在织梦里怎么搞呢？

第一步，去下载字体库。

现在网上很多免费的，比如Iconfont，或者FontAwesome。

我一般喜欢用FontAwesome，因为类名好记。

下载下来，你会得到一堆文件。

别慌，挑出你需要的几个。

比如你要做导航菜单，那就挑几个常用的。

第二步，把文件传到服务器上。

这点很重要。

很多新手把文件传错了地方，导致图标显示不出来。

建议你在织梦的模板目录里，新建一个文件夹，叫fonts或者icons。

把woff、woff2、ttf这些字体文件都放进去。

注意，路径一定要对。

如果你的模板在templets/default，那就放这里。

第三步，写CSS代码。

这是最关键的一步，也是最容易出错的地方。

你需要用@font-face来定义字体。

代码大概长这样：

@font-face {

font-family: 'myicons';

src: url('fonts/iconfont.eot');

src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),

url('fonts/iconfont.woff2') format('woff2'),

url('fonts/iconfont.woff') format('woff'),

url('fonts/iconfont.ttf') format('truetype');

}

注意看，这里的url路径，一定要写相对路径。

别写绝对路径，不然换个服务器就挂了。

还有，那个font-family的名字，你自己起个简单的，别用中文。

第四步，调用图标。

在织梦的模板里，比如index.htm，你想在哪显示图标，就加个span标签。

比如：

然后在CSS里定义这个类：

.icon-home {

font-family: 'myicons';

content: "\e600"; / 这里填图标的unicode编码 /

font-size: 24px;

color: #333;

}

这里的unicode编码，你去字体库官网找。

每个图标都有一个对应的编码，复制过来就行。

这时候，刷新页面，图标应该就出来了。

但是，这里有个大坑。

很多新手发现，图标显示出来是个方框，或者乱码。

这是啥原因？

通常是字体文件没加载成功，或者路径错了。

你按F12打开开发者工具，看看Network面板。

看看字体文件有没有404错误。

如果有，那就是路径问题。

再一个，就是编码问题。

确保你的html文件头部声明了utf-8。

这个不能少。

还有一个细节，就是颜色。

因为是字体，所以你可以直接用color属性改颜色。

不用像以前那样，换个颜色就得换张图片。

这点真的很爽。

特别是做响应式网站，图标跟着字号变大变小，非常灵活。

我当初折腾这个，花了整整两天。

试了各种方法，头发都掉了一把。

后来才发现，是字体文件引用顺序的问题。

一定要先定义@font-face，再使用图标。

不然浏览器可能找不到字体。

还有，有些老版本的浏览器，可能不支持woff2。

所以，为了兼容，最好把eot和ttf也带上。

虽然文件会稍微大一点，但为了用户体验，值得。

现在，你的网站图标是不是清爽多了？

加载速度是不是也快了？

这种细节能体现你的专业度。

用户虽然不懂技术，但能感觉到网站流畅、精致。

这就是我们做站的意义。

不是为了炫技，是为了让用户用得舒服。

最后再啰嗦一句。

别偷懒，路径一定要核对三遍。

代码格式也要规范。

缩进对齐，看着舒服，改起来也方便。

网站织梦用字体矢量图做图标，虽然起步麻烦点，但后期维护真的省心。

别再纠结图片格式了，拥抱矢量吧。

希望这篇笔记能帮到你。

如果有啥不懂的，多查查文档，多试试。

实践出真知嘛。

加油，各位站长朋友。