您现在的位置是:首页 > 教程 > ecshop商城教程ecshop商城教程
ecshop模板css高级应用iconfont矢量图替换方法
夜蕾2024-01-19 21:53:13ecshop商城教程已有11人查阅
导读矢量图标替换教程首入,这一段代码 注释掉,如下;然后在 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不同商品设置不同快递运费商品页显示快递运费的实现方法
ECSHOP商品页面显示快递运费,同时商品可以设置指定快递,不同商品不同运费二次开发教程。 先看看效果图: ‘安装和设置流程如下:一.ecshop后台系统ecshop导出订单导出excel订单表格的方法
很多时候,我们每月或者每年都需要做一个订单销售总结,这时要从ecshop订单管理里面拿订单详情,所以需要给ecshop订单管理加一个“导出订单”功能!ecshop商品批量导出数据包制作导出的方法
今天为大家详细解说一下ECSHOP商品批量导出,ECSHOP商品数据包制作导出设置。搜索到的商品会显示在左边的框内,选中后,点击右箭头按钮会添加到右侧的框内ecshop底部版权结构分析和修改
我们在ecshop二次开发和ecshop使用过程中,往往需要对ecshop底部进行处理和修改.比如ecshop底部版权问题,ecshop底部程序结构问题.也有很多朋友咨询ecshop底部的一些修改问题。
留言与评论 (共有 0 条评论) |