iconfont图标应用
一、什么是iconfont?
我们现在通常所指的iconfont,是用字体文件取代图片文件,来展示图标、特殊字体等元素的方法。iconfont是阿里巴巴矢量图标库是由阿里巴巴体验团队倾力打造的中国第一个最大且功能最全的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能,是设计师和前端开发的便捷工具。
二、iconfont对于前端应用来说有很多便捷:
1、自由变化大小,而且还具有更好的可维护性(因为是矢量,所以拉伸不变形);
2、体积小;
3、自由修改颜色,支持一些CSS3对文字的效果;
4、可以添加一些视觉效果如:阴影、旋转、透明度;
5、兼容IE6。
三、iconfont应用步骤:
1、首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”;
2、选择完所有要用的图标后“存储为项目”,给它命名。然后在“项目图标管理”-“我的项目”中找到这个项目,可以获取在线链接,但是在线会存在跨域问题,跨域是需要做些配置,所以一般下载到本地使用。
3、下载至本地并解压后,会有这几个文件,其中三个html文件就是字体图标的三种使用方式的介绍,可以直接打开文件在浏览器中展示demo可以看到三种使用方式的差别,其中unicode的兼容性最好,支持ie6+,下面就来试试这种方式:
4、 新建一个项目文件和index.html,将上面有用的文件都放入font文件夹下:
5、 相应图标并获取字体编码,应用于页面,将图标下的编码直接复制到页面:
<i class="icon confont"></i>
<i class="icon confont"></i>
6、 在index.html的css中声明字体,需要注意的是文件的路径:
7、 在css中定义使用iconfont的样式
8、 打开index.html,页面中就会出现字体图标了
四、iconfont常见问题:
1、字体图标在safair或chrome浏览器下被加粗?
以上现象是由于字体图标存在半个像素的锯齿,在浏览器渲染的时候直接显示一个像素了,导致在有背景下的图标显示感觉加粗;所以在应用字体图标的时候需要对图标样式进行抗锯齿处理,CSS代码设置如下:
.iconfont{-webkit-font-smoothing: antialiased;}
2、字体图标在IE7浏览器显示中图标右侧出现小方框现象;
出现以上现象可以对引用字体图标的非块标签进行以下CSS定义:
display: block;
3、字体图标在pc端的chrome浏览器下出现严重的锯齿;
出现以上现象可以对字体图标的边缘进行模糊;(只支持webkit内核浏览器,参数数值不宜设置得很大,这会带来图标加粗的问题)
-webkit-text-stroke-width: 0.2px;
iconfont官网地址:http://www.iconfont.cn/
iconfont图标应用的更多相关文章
- 如何引入iconfont图标与Element-UI组件
一.iconfont图标 iconfont方便又好用,介绍一下如何在vue项目中引入iconfont 1.进入iconfont官网 www.iconfont.cn 2.登录自己账户 3.选择图标后下载 ...
- 使用iconfont图标
iconfont.cn基本使用 登录iconfont.cn网站,直接使用github账号即可登录 输入关键字搜索需要的图标,然后在需要的图标上点击'添加入库' 点击网站右上角的购物车图标,查看当前已入 ...
- veu——引入iconfont图标
我这里是阿里的iconfont图标,如何下载请看下面这个博文 https://www.cnblogs.com/wangyang0210/articles/9248324.html 创建文件夹 在ass ...
- 自定义iconfont 图标库下载本地在移动App的使用及svg彩色图标
自定义iconfont 图标库扩展 在Hbuilder开发移动App的使用及svg彩色图标(或mui图标库的自定义扩展) 前提准备:1.登录阿里iconfont图标库,创建自己的项目,地址:http: ...
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- [Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题
Taro UI 配置 第三方 的 文档 配置即可解决 https://taro-ui.jd.com/#/docs/icon 解决问题: 之前 只有在H5下 才显示 Iconfont 图标 后来按照此文 ...
- [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题
React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size, line-height ,值为和 height 一样的高度. 例如: ...
- MintUI引入vue项目以及引入iconfont图标
官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://eleme ...
- 仿站-获取网站的所有iconfont图标
在仿站过程中,网站的iconfont查找非常浪费时间,这里教大家一次性获取网站iconfont的方法 1.打开 开发者工具 在element中搜索font-face,结果如下,复制font-face所 ...
- Hexo-使用阿里iconfont图标
Hexo-使用阿里iconfont图标 因为使用hexo搭建的博客中,大家并不懂都有什么图标,fa fa-xx就懵了,不知道都有什么. 首先,fa fa-xxx中的图标可以在 图标库 中寻找. (上面 ...
随机推荐
- JS中encodeURI()、decodeURI()、encodeURIComponent()和decodeURIComponent()编码与解码
编码解码问题. 解决这个问题大家一般都使用encodeURI或者encodeURIComponent方法,在这里做一下总结: 首先看看各个方法不同浏览器的支持程度 函数 描述 FF N IE deco ...
- android-audioRecord
android 录音功能 录音的大致流程,流程图可以在文件下载:mediarecord.vsdx 切换设备.谁去更新播放流,自动选择新的设备?流程?
- Linux编程之fork函数
在Linux中,fork函数的功能就是在一个进程中创建一个新的进程,当前调用fork函数的进程就是产生的新进程的父进程,新进程在以下也称为子进程.在新进程生成之后就会在系统中开始执行. 函数原型:pi ...
- 常用类:Object
2017-08-08 Object :作为所有类的根类,(超类,父类) 常用的方法: public int hasCode(){//返回该对象的哈希码值(地址)}:判断对象是否在同一内存地址上 pub ...
- [翻译] Visual Studio 2019: 极速编码. 智能工作. 创造未来.
原文: Visual Studio 2019: Code faster. Work smarter. Create the future. Visual Studio 2019 的正式版现在可以下载了 ...
- 背水一战 Windows 10 (107) - 通知(Toast): 提示音, 特定场景
[源码下载] 背水一战 Windows 10 (107) - 通知(Toast): 提示音, 特定场景 作者:webabcd 介绍背水一战 Windows 10 之 通知(Toast) 提示音 特定场 ...
- 包建强的培训课程(17):Java代码敏捷之道
第1讲 千言万语聊注释 按图索骥 奇葩注释“赏析” Git提交的学问 第2讲 RxJava:函数式编程 从一只猫的故事说起 背压 第3讲 代码瘦身 抽象相同逻辑的代码 查找相似代码 AOP一瞥 第4讲 ...
- Git使用详细教程(3):git add, git commit详解
在使用git之前,我们首先要初始化一个git管理的仓库,这里以博客(blog)为例 git init blog 我们进入目录,执行git status查看git状态,可以看到一个新的git管理的项目目 ...
- 从PMP培训归来,跟大家聊聊做项目的套路
管理也是一些套路的传承,很多人说不去学专门的管理,照样把工作做得很好.是的,不是散打乱打就不能赢,只是会吃点亏而已.如果你有了套路在心中,那么必定会让自己车到山前开路,让事情更好办. 所以,我去学了几 ...
- js-完整轮播图
js-完整轮播图 今天写一个完整的轮播图,首先它需要实现三个功能:1.鼠标放在小圆点上实现轮播.2.点击焦点按钮实现轮播.3.无缝自动轮播. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布 ...