您现在的位置是:首页 > 教程 > ecshop商城教程ecshop商城教程
ecshop模板css高级应用iconfont矢量图替换方法
夜蕾2024-01-19 21:53:13ecshop商城教程已有8人查阅
导读矢量图标替换教程首入,这一段代码 注释掉,如下;然后在 style.css 很底部 添加 以下代码;这样就可以了刷新页面看效果了。
矢量图标替换教程
首入: 这一段代码 注释掉,如下 然后在 style.css 很底部 添加 以下代码 这样就可以了刷新页面看效果了。
CSS字体图标
1.先看一张图
看到用黑框标记的那一排小图标吧,一开始我以为是用了background或者img标签来制作的
但是我用firebug看了好久,都没找到跟图片扯上关系的东东。。。后来仔细看了下html结构和css样式 好吧,刚开始莫名其妙的,但是注意到两个我从来没了解过的东西
一个就是这个 ? 字,另一个就是 fp-font 这个字体,我在想:难道这些图标是一种字体
好吧,我把这个 ? 字在html结构里面去掉,果然那个小图标就没了。。。
然后呢,我把这个页面的css样式下载下来,一个名为 index.css 样式文件,内容如下 ...后面很多省略掉
这就很清楚了,确实引入了他们自定义的字体,因为字体文件一般就是eot、ttf之类的文件
原来他们用的是自定义的字体这玩意,我只能说比我们高级多了(当然我发现很多设计思想比我们高级的,这个图标字体充其量是我没接触过而已)
了解到是一种字体之后,我就百度了一下,看来这玩意有很多资料啊,看来真的是我out了
2.字体图标的优势
体积小, 快:如果是图片的话,还要下载图片呢,多张图片就要建立多次http连接下载
灵活 高:因为是字体嘛,所以还可以对字体设置各种样式啊,比如字体大小,颜 等等
如果是一张图片的话,要放大缩小,那就要做好几张图片了。。。
当然,有优势肯定就有劣势,不然谁还用图片呢。毕竟图片的多样 和丰富
字体是远远不能比的,但是对于整个系统而言,如果要用到很多标准化的小图标
就可以考虑做一套自己的字体图标了
3.如何使用字体图标
你得会制作字体(当然我不会,这个我是外行),但是百度了一下看起来也不是很复杂,
比如使用Keyamoon制作的一个Web应用程序IcoMoon,然后再转换成Web字体
因为我不会,也不太感兴趣,所以就找了个网站下了几个字体图标,演示一下怎么用
http://icomoon.io/ 这个网站有很多免费的,可能就有你要的,我选择几个图标字体下载了,如图
然后这个网站很人 化,他把这些图片如何使用,都给你生成好了,包括样式文件和你下载的字体
然后你打开demo.html就可以看到效果了,页面会展示你刚才下载的图标,本质是字体而已
那么如果你自定义了字体,使用起来其实蛮简单的,给一段demo的代码就明白了 发现其实蛮简单的,就是先引入字体,然后定义一个class样式:指定使用你自定义的字体
完了之后,使用你定义的字映射到字体图标上,这里面耳机图标就是映射到 e600 上面
只不过这里面使用了 before 这个样式,指定在span标签里面插入 e600 这个
因此页面打开之后,就用字体图标展示了
总结:PC前端使用方法:
font-face声明字体 定义使用iconfont的样式 挑选相应图标并获取字体编码,应用于页面
<i class="iconfont">!</i>
首入: 这一段代码 注释掉,如下 然后在 style.css 很底部 添加 以下代码 这样就可以了刷新页面看效果了。
CSS字体图标
1.先看一张图
看到用黑框标记的那一排小图标吧,一开始我以为是用了background或者img标签来制作的
但是我用firebug看了好久,都没找到跟图片扯上关系的东东。。。后来仔细看了下html结构和css样式 好吧,刚开始莫名其妙的,但是注意到两个我从来没了解过的东西
一个就是这个 ? 字,另一个就是 fp-font 这个字体,我在想:难道这些图标是一种字体
好吧,我把这个 ? 字在html结构里面去掉,果然那个小图标就没了。。。
然后呢,我把这个页面的css样式下载下来,一个名为 index.css 样式文件,内容如下 ...后面很多省略掉
这就很清楚了,确实引入了他们自定义的字体,因为字体文件一般就是eot、ttf之类的文件
原来他们用的是自定义的字体这玩意,我只能说比我们高级多了(当然我发现很多设计思想比我们高级的,这个图标字体充其量是我没接触过而已)
了解到是一种字体之后,我就百度了一下,看来这玩意有很多资料啊,看来真的是我out了
2.字体图标的优势
体积小, 快:如果是图片的话,还要下载图片呢,多张图片就要建立多次http连接下载
灵活 高:因为是字体嘛,所以还可以对字体设置各种样式啊,比如字体大小,颜 等等
如果是一张图片的话,要放大缩小,那就要做好几张图片了。。。
当然,有优势肯定就有劣势,不然谁还用图片呢。毕竟图片的多样 和丰富
字体是远远不能比的,但是对于整个系统而言,如果要用到很多标准化的小图标
就可以考虑做一套自己的字体图标了
3.如何使用字体图标
你得会制作字体(当然我不会,这个我是外行),但是百度了一下看起来也不是很复杂,
比如使用Keyamoon制作的一个Web应用程序IcoMoon,然后再转换成Web字体
因为我不会,也不太感兴趣,所以就找了个网站下了几个字体图标,演示一下怎么用
http://icomoon.io/ 这个网站有很多免费的,可能就有你要的,我选择几个图标字体下载了,如图
然后这个网站很人 化,他把这些图片如何使用,都给你生成好了,包括样式文件和你下载的字体
然后你打开demo.html就可以看到效果了,页面会展示你刚才下载的图标,本质是字体而已
那么如果你自定义了字体,使用起来其实蛮简单的,给一段demo的代码就明白了 发现其实蛮简单的,就是先引入字体,然后定义一个class样式:指定使用你自定义的字体
完了之后,使用你定义的字映射到字体图标上,这里面耳机图标就是映射到 e600 上面
只不过这里面使用了 before 这个样式,指定在span标签里面插入 e600 这个
因此页面打开之后,就用字体图标展示了
总结:PC前端使用方法:
font-face声明字体 定义使用iconfont的样式 挑选相应图标并获取字体编码,应用于页面
<i class="iconfont">!</i>
本文标签:
很赞哦! (0)
暂无内容 |
暂无内容 |
相关文章
暂无内容 |
暂无内容 |
随机图文
ecshop订单打印订单信息显示商品缩略图的方法
1、打开 admin/order.php 文件 (建议使用editplus)找到2、打开 admin/templates/order_info.htm 模板页,在 {$goods.goods_sn} 后面增加ecshop二次开发教程开发手册详解
ecshop文件结构名称手册ecshop开发手册,ecshop使用手册,ECSHOP数据库结构参数表1:如何统计ecshop商品在订单中出现的次数ecshop常用文件模板说明介绍
1.模板文件说明 style.css – 模板所使用样式表 activity.dwt – 活动列表 article.dwt – 文章内容页 article_cat.dwt – 文章列表页 article_pro.dwt – 前一篇文章ecshop商品详情页显示当前会员等级价格的实现方法
会员登录状态下,在ECSHOP商品详情页的本店售价中显示当前登录会员对应的等级价格,在未登录状态下,则还默认显示原来的本店售价。
留言与评论 (共有 0 条评论) |