在html文档中添加 iconfont 图标
一、IconFont的优点
1.轻量性
可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护。
2.灵活性
可以自由变换IconFont大小(不失真),可以修改IconFont颜色,可以添加阴影,旋转,透明度等视觉效果。
3.兼容性
图标字体IconFont支持所有现代浏览器,包括IE低版本。
二、IconFont的缺点
1.图标字体只能被渲染成单色或者css3的渐变色;
2.设计自已的IconFont需要花费大量时间,也会增加前端重构的成本;
3.Firefox和IE9不支持对IconFont图标字体的跨域访问。
三、如何制作IconFont?
1.制作IconFont矢量文件的要求
按照图标制作说明,设计师制作一个一个的AI矢量图,存储为SVG格式,这里提醒,不要把所有图标做在一张矢量文件上。
2.如何上传SVG?
如果你有阿里内部账号,或者新浪微博账号,登录进去,即可在http: //iconfont.cn/网站上传SVG。可以单个上传,也可以批量上传。填写每个图标的名称和Tag,点击确认,接着继续上传图标,或者完成上传。这里需要强调的是,在上传SVG前,最好能给每个SVG取唯一的英文名,该英文名字表示SVG图标的含义。这样做的好处是,在上传图标时,不用再修改图标名称和Tag了,直接默认为SVG的英文名。
3.如何申请个人图标库?
凑够50个上传的图标,你就可以申请个人图标库啦。主要包括给图标库取名,tag用”, ”分隔,介绍图标库等步骤。
在【上传图标】界面,可以对每个图标进行编辑,删除,下载。
在编辑弹出框中,可以修改图标名称,Tag,图标fontClass(前端要用)
在下载弹出框中,可以下载该图标对应的SVG,AI,PNG等格式文件。
如果你是纯前端工程师,不会使用AI画矢量图,合作的设计师之前也没做过IconFont矢量图,你依然可以拥有自己的个人图标库。
首先,在【官方公开库】或【所有公开库】中,随意打开一个图标库,你可以对该库中的每个图标进行加入购物车,收藏,下载等操作。
如果你收藏了某个图标,在【收藏图标】界面,你会发现你收藏的图标有购物车满了,删除,下载等操作。
不管是在【公开库】界面,还是【收藏图标】界面,你都可以下载喜欢的图标对应的SVG格式,然后重命名,再上传。
四、项目图标管理和下载多格式文件
点击图标,你会看到图标飞入暂存架。暂存架里面有‘存储为项目’,‘下载至本地‘,前者可为【项目图标管理】做准备,后者用于【下载多格式文件】,为前端写页面做准备。
1.关于项目图标管理
如果你在暂存架中,点击“存储为新项目“,输入项目名,即可在项目管理面板看到你的图标项目。如果选择把文件存放在你的服务器上,可以不用项目图标管理功能;如果选择把文件托管在http://iconfont.cn/平台,可以获取在线链接,就是iconfont.css 引用iconfont.eot,iconfont.svg,iconfont.ttf,iconfont.woff四个字体文件相关链接。两者的区别在于链接地址,前者是文件所在文件夹的相对路径或者文件所在服务器的绝对路径,后者是文件所在IconFont托管平台的绝对路径。
2.关于下载多格式文件
如果你在暂存架中,点击“下载至本地“,你可以得到一个压缩包。解压后的文件夹一般包括demo.html,demo.css,iconfont.css,iconfont.eot,iconfont.svg,iconfont.ttf,iconfont.woff等7个文件。iconfont.css里面除了会引用iconfont.eot,iconfont.svg,iconfont.ttf,iconfont.woff四个字体相关文件,还包含你之前选择的每个图标的样式编码。如果希望把字体文件单独放在一个文件夹,需要在iconfont.css里面修改文件引用路径。前端做页面,如果要对图标进行大小限制和颜色调整,需要在demo.css中另外写样式,接着应用在demo.html页面中。
五、如何引用IconFont?
写页面时,前端有两种引用方式:
1.标签内写编码; <i class="iconfont"></i> 2. 标签类名内加该图标类。 <i class="icon iconfont"> </i>
六、使用问题总结
1.字体图标在Safair或Chrome浏览器下被加粗
以上现象是由于字体图标存在半个像素的锯齿,在浏览器渲染的时候直接显示成一个像素,导致在有背景下的图标显示感觉加粗,解决方案是:对图标样式进行抗锯齿处理,.iconfont {-webkit-font-smoothing: antialiased;}
2.字体图标在IE7浏览器中,图标右侧出现小方框
解决方案是:在标签样式中加入display: block;
3.字体图标在pc端的chrome浏览器下出现严重的锯齿
解决方案是:对字体图标的边缘进行模糊。
七、使用iconfont流程图(有4种入口可以把字体图标加入暂存架)
这里留一个思考题,大家共同学习。为何下载包里面的svg打开后无图案?不管是用浏览器,还是用我笔记本上的AI软件,打开后,都是空白,无图案。
http://www.cnblogs.com/camille666/p/iconfont.html
在html文档中添加 iconfont 图标相关推荐
- word文档中添加mathtype加载项
教您在word文档中添加mathtype加载项 发布时间:2019/08/12 mathtype安装完成后,正常情况下会在word文档中的菜单中自动添加mathtype加载项,但有时也会出现小意外,m ...
- java 界面艺术字,Java 在Word文档中添加艺术字
与普通文字相比,艺术字更加美观有趣也更具有辨识度,常见于一些设计精美的杂志或宣传海报中.我们在日常工作中编辑Word文档时,也可以通过添加艺术字体来凸显文章的重点,美化页面排版.这篇文章将介绍如何使用 ...
- java setrotation_Java 在Word文档中添加和旋转图形
一.前言及环境搭建 在Word文档中,我们可以在录入文本信息时加入一些图形,来使内容更加生动形象且富有独特样式.前文中演示过如何在Excel工作表中添加.读取和删除形状,同时也介绍过怎样在PPT文档中 ...
- 怎样在PDF文档中添加插入图片
制作编辑文档的时候经常需要在文档中添加一些图片内容,这样可以使文档更生动.像word.ppt这些文档可以直接通过复制粘贴就可以了,那么编辑pdf文件的时候怎样在文件中插入图片呢? 方法/步骤 首先是需 ...
- Java在PDF文档中添加或删除页面
前言 当你编辑一个PDF文档时,有时需要删除文档中多余的页面或向文档中添加新的页面.本文将向您演示如何使用Spire.PDF for Java在PDF文档中添加或删除页面. 程序环境 安装Spire. ...
- Word开发工具Aspose.Words功能演示:在C ++中以编程方式在Word文档中添加或删除页眉和页脚
Word文档中的页眉和页脚用于格式化和显示重要信息,例如主题,章节,页码,Copywrite等.以编程方式使用Word文档时,可能需要添加或删除页眉和页脚.为此,本文将教您如何使用C ++在Word文 ...
- Word处理控件Aspose.Words功能演示:在C#中的Word文档中添加或删除水印
水印通常用于显示文档的所有权或分类.在本文中,我们将学习使用Aspose.Words for .NET API 在Word文档中使用水印.让我们介绍以下与水印有关的用例. 使用C#在Word文档中添加 ...
- java设置标签艺术字体颜色_Java 在Word文档中添加艺术字
与普通文字相比,艺术字更加美观有趣也更具有辨识度,常见于一些设计精美的杂志或宣传海报中.我们在日常工作中编辑Word文档时,也可以通过添加艺术字体来凸显文章的重点,美化页面排版.这篇文章将介绍如何使用 ...
- java gui 艺术字_Java 在Word文档中添加艺术字
与普通文字相比,艺术字更加美观有趣也更具有辨识度,常见于一些设计精美的杂志或宣传海报中.我们在日常工作中编辑Word文档时,也可以通过添加艺术字体来凸显文章的重点,美化页面排版.这篇文章将介绍如何使用 ...
- java 艺术字_Java 在Word文档中添加艺术字的示例
与普通文字相比,艺术字更加美观有趣也更具有辨识度,常见于一些设计精美的杂志或宣传海报中.我们在日常工作中编辑Word文档时,也可以通过添加艺术字体来凸显文章的重点,美化页面排版.这篇文章将介绍如何使用 ...
最新文章
- 三维模型特征提取方法概述
- Android 7.0 WifiMonitor工作流程分析
- 理解Hinted Handoff
- 栈C/C++实现(数据结构严蔚敏版)
- 神武服务器维护打副本,6月9日神武2维护解读:120级副本奖励次数提升
- [css] 如何更改placeholder的字体颜色和大小?
- Keras-5 基于 ImageDataGenerator 的 Data Augmentation实现
- 《学生快捷记账系统》——个人博客04——星期四
- java实现打印菱形(任意输入数字打印任意阶菱形)
- Python tkinter库之Canvas正方形旋转
- Xcode打包ipa的基本步骤
- c语言中罗马字母数字,C语言程序经典示例—-(22)阿拉伯数字转换为罗马数字...
- 用正则表达式进行身份证验证
- 计算机音乐数字谱抖音,抖音计算器音乐乐谱
- 明源(2.5.6)二次开发 - 添加菜单
- 2022年超全的Android面经(附含面试题|进阶资料)
- gstreamer+qgc+aarch64
- 【算法竞赛学习笔记】状压DP
- 跨时钟域同步-结绳法
- 初步使用openEuler华为欧拉Linux系统
热门文章
- B. Hierarchy
- 通过LINQ表达式树动态构建查询条件
- POJ 1579 Function Run Fun
- 请教Parser Generator 开发工具中关于Lex和Yacc的问题
- AI 大规模分布式SGD:瞬间训练完基于ImageNet的ResNet50
- 如何在Linux启动jar 包
- YOLO V1论文理解
- 【Codeforces Round #422 (Div. 2) C】Hacker, pack your bags!(hash写法)
- POJ 3668 枚举?
- Android 获取图片研究