手机模板图标字体更改(首页图标导航及底部图标替换)

2018-01-02 大搜CMS

网页设计中,使用图标字体的好处:

1、完全不依赖JavaScript,因此无需担心兼容性

2、无限缩放,无论在任何尺寸下,可缩放的矢量图形都会为您呈现出完美的图标

3、只要CSS支持,无论颜色、大小、阴影或者其它任何效果,都可以轻易展现。

无忧手机模板中就用到了图标字体,具体体现在:首页菜单导航图标、底部按钮图标等等

 

如果您对现有图标不满意,可以按照以下步骤替换:

1、访问http://www.iconfont.cn,需要先登陆,从图标库中选择心仪的图标

2、将鼠标放到每个图标上,会出现3个按钮,点击“购物车”按钮,把图标放到“暂存架”中

3、选好后,点击页面右上角的“暂存架”,再点击“下载至本地”,这样就选好了图标并下载下来

4、解压后,打开demo.html文件,查看下载的是否成功(图标是否显示),如果不成功,请重新到“暂存架”中下载

5、最终得到可使用文件:iconfont.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff共5个,那个demo.html、demo.css用不到

6、用dreamweaver打开iconfont.css,将里面的:iconfont替换成:iconfont6,因为我们的模板默认已经使用了iconfont和iconfont1

7、将iconfont.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff文件,重命名为:iconfont6.css、iconfont6.eot、iconfont6.svg、iconfont6.ttf、iconfont6.woff

8、将以上重命名后的文件,复制到网站skin/模板编号/css/下面

9、在需要使用的页面添加如下css引用代码:

<link rel="stylesheet" type="text/css" href="{$GLOBALS['skin']}css/iconfont6.css" />

10、在需要使用图标的地方添加如下代码(具体每个图标的编码请查看demo.html文件):

<i class="iconfont6">&#x33;</i>