Iconfont 国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具。
Iconfont是一个矢量技术交流学习分享的平台，同时为广大用户提供矢量图标存储、字体图标转换的平台。已收录28万+图标素材。
资源整理者简介：
可能感兴趣的文章
按分类快速查找
关于资源导航
伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1440 项工具资源。
关于资源导航
伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。
新浪微博：
推荐微信号
（加好友请注明来意）
- 好的话题、有启发的回复、值得信赖的圈子
- 分享和发现有价值的内容与观点
- 为IT单身男女服务的征婚传播平台
- 优秀的工具资源导航
- 翻译传播优秀的外文文章
- 国内外的精选博客文章
- UI,网页，交互和用户体验
- 专注iOS技术分享
- 专注Android技术分享
- JavaScript, HTML5, CSS
- 专注Java技术分享
- 专注Python技术分享
& 2018 伯乐在线Iconfont矢量图标库在网站中的使用方法
大家都知道现在移动端网站设计比较热门，由于移动端的网站页面的收缩性要求很高，必然在网页设计中，一些小点的图标，使用图片收缩性，以及美观上并不是很理想；下面给大家分享一下iconfont矢量图标（字体图标）如何在网页中使用
如上图中使用到的都是iconfont图标，使用起来非常方便，随时可以自由的修改你想要的大小和颜色等等！
Iconfont是阿里巴巴推出的矢量图标库，其中涵盖了1000多个常用图标，并在持续更新中。
iconfont图标的优势：
自由变化大小（高清屏无压力）
自由修改颜色（纯色）
可以添加一些视觉效果，如：阴影、旋转、透明度等
iconfont图标在网站中的使用方法：
在iconfont的官网中调用iconfont图标的方法很多，在项目中我就常用unicode引用方法，
第一步：拷贝项目下面生成的font-face
第二步：定义使用iconfont的样式
第三步：挑选相应图标并获取字体编码，应用于页面
就这简单的三步就能做出你想要的字体图标了，但是有很多小伙伴肯定会有疑问还不知如何使用（特别是刚接触字体图标的小伙伴）所以今天我还得用一个实例来教大家如何在网页中显示字体图标，官网的知识只能教你如何加载文件而实操的话就得靠自己摸索了！
首先我想做一个底部导航栏，如下（有4个小图标）
要想展示这些图标，首先想到的是要去iconfont官网搜索好图标然后下载到本地文件夹中！
输入你想要搜索的图标
比如说搜索“首页”然后就有很多图标展示出来，选择你想要的，然后点击购物车的图标添加入库
选好后到自己的购物车里可以看到如下图所示，自己就新建一个项目文件用来管理好在哪个项目下的字体图标
在自己的项目里可以看到添加好的图标，然后点击下载至本地，就完成了图标的下载
在自己的html项目下新建一个font文件夹，用来存放下载下来的字体图标文件：
在下载好的字体图标文件中选择以下4个文件拷贝到html下的font目录下即可：
现在就可以来定义自己的字体图标样式和布局了：
用来装字体图标的标签记得加上类 class="iconfont"才能显示字体图标；字体编码可以到iconfont中你自己新建好的项目里查找
这两部分记得写上，如果怕忘记添加，你们可以放在你的公用css样式里
这样就可以自定义加载的图标的大小和颜色了，因为字体图标就是一个字体，所有可以把它当成是字体那样调整样式即可！
责任编辑：
声明：本文由入驻搜狐号的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
耕耘10载，做移动电商我们更专业！互联网解决方案提供商！
互联网解决方案提供商！你值得拥有！
今日搜狐热点ionic2实战-使用阿里巴巴矢量图标库Iconfont - 简书
ionic2实战-使用阿里巴巴矢量图标库Iconfont
为什么使用阿里巴巴矢量图标库Iconfont
Iconfont提供了近百万数量的图标,并且有多种使用方式
我们要使用字体图标,相对图片占用小,更清晰,大小颜色更易控制
ionic官方提供的图标不够用,没有具体业务方面合适的图标
如何使用Iconfont
官网提供了github和新浪微博两种登录方式,如果直接用微博登录不上去,那先登录,再去用微博登录
本文是Iconfont web端的详细使用教程,其他使用方式,建议阅读
搜索图标并加入购物车
搜索图标并加入购物车
点击右上角购物车图标,在打开的窗口中,点击"添加至项目",没有项目则会提示创建项目
将图标添加至项目
一.在app中使用自定义字体图标-Iconfont官方方式
在app内容区域中使用自定义图标
在图标管理-我的项目中编辑图标,并生成图标链接
Paste_Image.png
复制生成的链接并添加到appsrc/index.html文件中.注意:给链接加上http:或https:否则在真机上显示不出来.当然也可以把资源下载到本地进行引用iconfont.css
复制生成的css链接
在index.html添加css链接
效果图完整代码如下.注意:这里用的是class,不像ionic图标使用的是name属性
&ion-header&
&ion-navbar&
&ion-title&
&/ion-title&
&/ion-navbar&
.my-icon&i{
font-size: 32
height: 36
&/ion-header&
&ion-content&
&div class="my-icon"&
&i class="iconfont icon-patorl-task" color="primary"&&/i&
&i class="iconfont icon-patorl-record" color="primary"&&/i&
&i class="iconfont icon-repair-task" color="energized"&&/i&
&i class="iconfont icon-repair-record" color="energized"&&/i&
&i class="iconfont icon-experiment-task" color="secondary"&&/i&
&i class="iconfont icon-experiment-record" color="secondary"&&/i&
&i class="iconfont icon-guard-task" color="danger"&&/i&
&i class="iconfont icon-guard-record" color="danger"&&/i&
&ion-list&
&ion-item&
&ion-icon class="iconfont icon-experiment-record" color="secondary" item-right&&/ion-icon&
&/ion-item&
&ion-item&
&ion-icon class="iconfont icon-patorl-record" color="primary" item-right&&/ion-icon&
&/ion-item&
&ion-item&
&ion-icon class="iconfont icon-patorl-task" color="primary" item-left&&/ion-icon&
&/ion-item&
&ion-item&
&ion-icon class="iconfont icon-experiment-task" color="secondary" item-left&&/ion-icon&
&/ion-item&
&/ion-list&
&/ion-content&
二.在tab中使用自定义字体图标-ionic方式
挑选图标并下载到本地
复制字体文件到项目中
新建一个tab.scss文件,并复制下载的iconfont.css文件的内容到其中
修改后的tab.scss
在tab中使用
其实在任何地方都可以用zhifubao和qq,也可以不用新建tab.scss,直接把自定义的css写在src/theme/variables.scss文件中,因为所有的.scss最终编译的css都放在了www/build/main.css文件中
三.在tab中使用自定义图标-图片方式
在tab中使用自定义图标
看图看代码
.ion-ios-my-test:before {
content: url("../assets/icon/test.png");
.ion-ios-my-test-outline:before {
content: url("../assets/icon/test-outline.png");
.tab-button[aria-selected=true] .ion-md-my-test:before {
content: url("../assets/icon/test.png");
.tab-button[aria-selected=false] .ion-md-my-test:before {
content: url("../assets/icon/test-outline.png");
很多人都犯得错误
哪里写的不好,请留言批评;
如果对你有帮助,请收藏点赞;
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用到的组件1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SDWebImage多个缩略图缓存组件 UICKeyChainStore存放用户账号密码组件 Reachability监测网络状态 DateTools友好...
CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)&!DOCTYPE htm...
发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注
09:45字数 61697阅读 3316评论 2喜欢 85 用到的组件 1、通过CocoaPods安装 项目名称 项目信息 AFNetworking 网络请求组件 FM...
每个民族都有自己特色的服装服饰，那么说起和服，不得不提的就是女式和服后面的那个小枕头。我和好多人一样，都对它十分好奇。那个所谓的小枕头其实并不是一个枕头，而是由腰带和蝴蝶结发展而来的。她们的服饰本来是没有现在我们看到的那个枕头的，而只是平整的衣服，在腰间有一根腰带而已。...
自由一直是你我所向往的一个词汇，财务自由，情感自由，生活自由......我们希望生活能自由自在，我们期望未来无可阻挡。
有人说，以自由为目标的人最不自由，因为他想要得到的是这世界上不存在的东西。但这种与生俱来的欲望谁又能阻止呢？
从人生的起初就可以预见，渴望...
一、每天早上七点准时发公众号，四篇组合图文。 二、文章先在简书编辑，然后发布。 三、把简书的文章用秀米排版过后复制粘贴到公众号，然后保存。排版格式一定要尽快定下来。每篇文章都要有固定的排版格式。 四、把这四篇文章分别发到头条号，新浪微博，知乎，豆瓣。 五、每天晚上最后用半个...
在七月，内心的咆哮再也止不住 在沉默之前让我爽快地清清喉咙 巢湖呵，我站在你浑浊的眼眶里 看不见一颗泪滴 让我在七月化作你的眼泪 让语言之马先走 让理论之鸟先飞 让自己躺在一艘破船里 词藻呵，你这高傲的谋杀者 请脱下衣服与我决斗 看看雨水和阳光如何惺惺相惜 看看他如...
记录于：更新后 MacOS 版本为 10.13.1 今天系统升级后，发现原来开发 IDE 里的 git 托管项目，没法push和pull 操作了，然后看到控制台里提示信息： xcrun: error: invalid active developer p...Iconfont-阿里巴巴矢量图标库一、html网页的使用步骤：
1. 登录进入阿里巴巴矢量图标库中，选择自己喜欢的图标，放到购物车， ；
2. 新建一个项目，保存到项目，下载到本地。
3. 网页使用时候，首先在html网页包含：
@font-face {font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
.iconfont {
font-family:"iconfont" !
font-size:42
font-style:
-webkit-font-smoothing:
-webkit-text-stroke-width: <span style="color: #.2
-moz-osx-font-smoothing:
完整demo：
&!DOCTYPE html&
&meta charset="utf-8"/&
&title&IconFont&/title&
&link rel="stylesheet" href="demo.css" /&
&style type="text/css"&
@font-face {font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
.iconfont {
font-family:"iconfont" !
font-size:42
font-style:
-webkit-font-smoothing:
-webkit-text-stroke-width: <span style="color: #.2
-moz-osx-font-smoothing:
&div class="main markdown"&
&h1&IconFont 图标&/h1&
&ul class="icon_lists clear"&
&i class="icon iconfont"&&#xe601;&/i&
&div class="name"&好友印象&/div&
&div class="code"&&#xe601;&/div&
&i class="icon iconfont"&&#xe645;&/i&
&div class="name"&酒店印象&/div&
&div class="code"&&#xe645;&/div&
&i class="icon iconfont"&&#xe6c4;&/i&
&div class="name"&品牌印象&/div&
&div class="code"&&#xe6c4;&/div&
&div& &i class="icon iconfont"&&#xe601;&/i&&/div&
4. 引用哪个，输入:
&i class="icon iconfont"&&#xe601;&/i&
阅读(...) 评论()}