一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜色,可以添加阴影,旋转,透明度等视觉效果. 3.兼容性 图标字体IconFont支持所有现代浏览器,包括IE低版本. 二.IconFont的缺点 1.图标字体只能被渲染成单色或者css3的渐变色: 2.设计自已的IconFont需要花费大量时间,也会增加前端重构的成本: 3.Firefox和IE9不…

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:        这些小图形我们可以用图片代替,通常我们是把这些图形切图之后做成精灵图(又叫雪碧图): 精灵图的原理:把很多小图片集合成一张大图片,然后用设置背景图的位置来显示图片: 精灵图的优点:减少服务器的请求次数,降低服务器压力: sprites是一款很好的精灵图制作工具: 当然还有其他的方法可以制作这些…

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:        这些小图形我们可以用图片代替,通常我们是把这些图形切图之后做成精灵图(又叫雪碧图): 精灵图的原理:把很多小图片集合成一张大图片,然后用设置背景图的位置来显示图片: 精灵图的优点:减少服务器的请求次数,降低服务器压力: sprites 是一款很好的精灵图制作工具: 当然还有其他的方法可以制作…

今天用iconfont遇到了字体图标的使用问题.关于使用字体图标的方式在这里有介绍三种方式(css和js的引入和平时一样) 首先你要分清是用单个字体图标icon,还是多个字体图标icon 关于使用代码的下载方式(一般都是使用多个字体图标) 单个字体图标icon: 一:搜索你想要的字体图标: 二:添加到图库 三:下载代码 下载该图标库的代码到本地,代码包括demo的html和css文件.iconfont的css.js以及各种字体文件,demo是使用说明,iconfont文件是使用这个图标库所必须的…

1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源,然后直接下载使用,或者建立图标库然后再使用,例如这里以删除的图标为例 a) 搜索删除图标 b) 选择需要的图标,然后可以执行三种操作:添加入库.收藏或者直接下载,可以根据自己的实际情况来选择相应操作,这里选择添加入库,操作完可以看到图标已经添加进右上角的购物车里了 c) 点击右上角的购物车,可以看到如下页面,这里…

最近一直忙于日常任务,其实是懒癌又犯了..........不过因为自己的“懒癌”,“不思进取”给自己挖了不少坑. 一,小程序工具的安装 打开简易小程序的官网https://mp.weixin.qq.com/debug/wxadoc/dev/,,点击 导航栏里的“工具“->点击“微信开发者工具”,如图: 进入下载开发工具页面,然后根据自己的电脑配置选择相应的压缩包. 二.创建一个自己的项目 1.安装好“微信开发工具”==>双击打开,扫码进入==>调试类型选择“本地小程序项目”==>点…

如下图, 写四个圆圈,直接将iconfont的字体编码写在静态HTML结构中时显示没问题,然而明显这样的结构用循环写是更好的选择, 但是,页面上不能显示字体图片了,而是直接显示字体编码 原因是字体编码后面四位是Unicode编码,想使用字符串来传递的话,只要将 "" 改为 "\ue655" 即可. 正确显示的字体图标:…

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点…

前言 有问题可以随时提问,评论私信,只要我有时间我都会第一时间回复.当大家发现这篇文章不适用的时候烦请告知下,我好做好更改! 放置 下载好的字体图标放在static目录下,我是自己又创建了一个iconfont目录便于区分,我是全引入的,如果后面出现问题再更改 引用 在App.vue中引用 @import "./../static/iconfont/iconfont.css"; 重新编译 $ npm run build…

1.1.进入阿里图标网站 http://www.iconfont.cn/ 1.2.在购物车里添加自己需要的字体图标 1.3.下载代码 1.4.解压过后,找到iconfont.css,放在你的项目里,需要时引入. 1.5.使用时给标签添加俩个对应类名即可,第一个固定iconfont,第二个demo文件里有, <i class="iconfont icon-all" style="color:green;font-size: 100px;"></i&g…