比特派钱包下载官方app|阿里巴巴iconfont官网
比特派钱包下载官方app|阿里巴巴iconfont官网
作者： 比特派钱包下载官方app
2024-03-08 22:49:01
iconfont-阿里巴巴矢量图标库
iconfont-阿里巴巴矢量图标库
引入阿里iconfont图标方法以及注意事项 - 知乎
引入阿里iconfont图标方法以及注意事项 - 知乎切换模式写文章登录/注册引入阿里iconfont图标方法以及注意事项tuonioooo计算机技术与软件专业技术资格证持证人背景在我们做日常项目时，通常会用到icon图标或者是一些图标字体，阿里iconfont是我们选择的较多的一种，下面我将会介绍使用方法和几种常用的引用方式iconfont新建项目官网：https://www.iconfont.cn/ 在首页选择【图标管理】-【我的项目】点击 【我的项目】填写项目信息，即可完成新建一个项目。【FontClass/Symbol 前缀】和【Font Family】参数是自定义的，以后会与我们生成的代码相关联，默认即可。添加图标新建好项目后，找到自己想要的图标，加入购物车。点击页面右上角的购物车图标，打开自己的购物车，选择添加至项目，我们就可以在自己的项目下看到添加的图标了。在我们的项目下，可以对图标进行编辑，如：大小、颜色、填充色，旋转等操作。Vue工程中引入iconfont官方文档：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code根据官方文档，有unicode引用、font-class引用、symbol引用三种引入方式，这三种方式又分有两种情况：下载到本地引入，在线链接引入。在Iconfont网页我们自己的项目下可以看到这些方式选择。unicode引用 不推荐本地引入unicode方式代码量少，并不需要下载本地文件。链接引入unicode模式下的在线链接指的是font-face代码。在vue中，将项目生成的font-face代码和自定义的iconfont样式写在App.vue的style中，就可以在项目中引用图标了。此时样式是全局作用的，如果想要实现图标不同的样式，可以增加一层自定义样式。在”myIconStyle”样式中修改color等属性可以覆盖全局的样式，实现单个的样式修改。这里注意理解下，官方文档说的“不支持多色”，是指我们iconfont网页项目中，就算有多色图标，引用的时候会自动去色，统一变成默认的颜色，不管你给图标一编辑了红色图标二编辑了黄色，在项目中用unicode方式引用的时候都会变成默认颜色，但是我们仍然可以通过修改css样式实现图标颜色自定义，只是这个颜色编辑放在代码层面来了。font-class引用 推荐使用如官方文档所说，font-class是为了让程序更加直观可读，直接用unicode会造成阅读困难。font-class模式关键在于生成的css文件。本地引入按照下图选择文件放入自己的项目中，vue中建议在assets文件夹下新建一个iconfont文件夹，放相关文件。常用的就是：iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2@font-face {
font-family: "iconfont"; /* Project id 2974228 */
src: url('iconfont.woff2?t=1640340931514') format('woff2'),
url('iconfont.woff?t=1640340931514') format('woff'),
url('iconfont.ttf?t=1640340931514') format('truetype');
}再就是引入时，需要注意的是字体文件路径引用是否准确，否则打包可能不识别然后在main.js中引入iconfont.css文件，就可以正常使用了。import './assets/iconfont/iconfont.css'链接引入方式一：在index.html头部中，引入css文件即可方式二：点开css代码链接复制css代码，在项目中粘贴到iconfont.css文件中 ，在App.vue或main.js中引入import './assets/iconfont/iconfont.css'注意：iconfont.css中url 官方默认是cdn 链接, 打包时请改成http否则不识别@font-face {
font-family: "iconfont"; /* Project id 2974228 */
src: url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff2?t=1639986814919') format('woff2'),
url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff?t=1639986814919') format('woff'),
url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.ttf?t=1639986814919') format('truetype');
}打包后@font-face {
font-family: "iconfont"; /* Project id 2400747 */
src: url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff2?t=1634895844844') format('woff2'),
url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff?t=1634895844844') format('woff'),
url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.ttf?t=1634895844844') format('truetype');
}symbol引用 不推荐本地引入将下载好的iconfont.js文件放入自己的工程目录，在main.js中引入，在App.vue中写好通用css代码，即可使用。import './assets/iconfont/iconfont.js'这里注意一点，下载下来的js文件是压缩过的，如果项目使用了eslint语法校验会疯狂报错，可以在js文件开头加入 /* eslint-disable */来指定该文件不应用eslint校验。链接引入在index.html头部中，引入js文件即可uni-app 引入iconfont图标基本上引入方式跟上Vue相同，但是会遇到打包时图标引入不显示的问题，解决方式如下：1.在iconfont.css中，需要使*~@* 将路径添加完整@font-face {
font-family: "iconfont"; /* Project id 2642111 */
src: url('~@/static/fonts/iconfont.woff2?t=1625021641165') format('woff2'),
url('~@/static/fonts/iconfont.woff?t=1625021641165') format('woff'),
url('~@/static/fonts/iconfont.ttf?t=1625021641165') format('truetype');
}2.在App.vue全局引入iconfont.css3.使用图标，在标签内的class通过"iconfont icon-"添加下载好的图标即可
总结 symbol引用最受官方推荐，也是最优的方式，但是浏览器兼容不好，目前来看，前端需要兼容一些低版本的浏览器，所以如果考虑到用户使用，不建议采用symbol引用。 unicode引用浏览器兼容最好，但是可读性差，font-class引用虽然兼容性比unicode引用差一点，但是提高可读性，综合来看，目前项目中还是采用font-class引用比较好。 因为引用网络资源的不稳定，所以建议采用本地引入的方式。 如果在图标库中新增加了图标，则需要更新在线链接并把该链接重新引入到实际项目中，或者重新下载代码到本地，然后在实际项目中引入最新的iconfont文件。 再就是引入时文件路径的问题，打包都需要注意。点击下方卡片/微信搜索，关注公众号“天宇文创意乐派”(ID:gh_cc865e4c536b)听说点赞和关注本号的都找到漂亮的小姐姐了哟且年后必入百万呀！！往期推荐分享6个实用的网站，非常Nice利用Vue 脚手架 开发chrome 插件，太方便了！Vue类似hooks的新库VueUse使用NodeJs和JavaScript开发微信公众号再见 Swagger UI！国人开源了一款超好用的 API 文档生成框架，Star 4.7K+，真香！！JavaScript 细节和一些实际应用，了解一下本文使用 文章同步助手 同步编辑于 2021-12-27 22:54图标Icon Font阿里软件赞同 4添加评论分享喜欢收藏申请
手把手教你如何在项目中使用阿里字体图标IconFont - 知乎
手把手教你如何在项目中使用阿里字体图标IconFont - 知乎切换模式写文章登录/注册手把手教你如何在项目中使用阿里字体图标IconFont鄢云峰技术不咋地，头却要秃了：）阿里图标官网地址：IconFont阿里巴巴矢量图标库一、注册账号要使用阿里图标，首先你要在它的官网注册一个账号，注册的方式有多种（手机号，Github，微博，阿里域账号），根据你自己的情况进行选择。具体操作很简单，这里就不赘述了。二、创建项目虽然你不创建项目也能通过直接下载代码使用字体图标，但是后期维护会很麻烦。比如你已经生成了字体图标文件，并且已在项目开发中使用。后期如果要追加图标 ( 原先的图标不够用 ) ，由于你之前没有创建项目，那么想要追加图标的话成本很高，操作很麻烦。所以，每个为项目建立独立的字体图标项目是很有必要的。创建流程如下：找到菜单中的 【资源管理】=> 【我的项目】点击进入，进入之后点击右侧的 【新建项目】，如下图：【新建项目】按钮点击之后弹出如下表单，根据自己开发的项目填写相关内容项目名称： 建议填写和你开发项目相同的名称，之后项目多了好区分查找项目描述： 这个你们自己看着填，随便无所谓FontClass前缀： 这个是定义字体图标样式的前缀，默认icon，可自行修改，也可以不改，看你们自己项目需求Font Family: 字体名称，默认是iconfont，可自行修改，也可以不改，看你们自己需求字体格式： 这里是选择字体文件要生成哪几种格式，因为不同的浏览器可能兼容性不同，建议选择 WOFF2 WOFF TTF。如果有彩色图标需求，请勾选 彩色。所有者： 默认就是创建项目的人，在当前界面不可修改。后期通过【项目设置】进行修改，比如从公司离职，要做工作交接时，你可以将这个项目的所有权转让给公司同事。操作者： 在当前界面不可修改。后期通过【项目成员】进行修改，因为通常都是几个同事一起做一个项目，所以项目创建完之后可以把相关同事拉入项目，让同事可以访问此图标项目补充说明：为了给大家做演示，我创建了一个名为 【DemoFontProject】的项目，后面做图标导入到项目的时候会用到关于字体格式官方有相关的说明，具体说明如下：iconfont 现在已经支持用户灵活的配置生成字体格式的功能，可以在「我的项目」→右上角「项目设置」→「编辑项目」→「字体格式」中勾选需要的字体格式。默认将生成 WOFF2、WOFF、TTF 三种格式。.eot(IE6) 和 .svg 是非常「古老」的字体格式，而且不是 OpenType 标准，我们默认将禁用它们，不推荐在项目中使用，如果需要可以手动开启。同时彩色字体中不支持这两种格式，当勾选彩色选项后会自动禁用这两个选项。由于性能的原因，默认也会禁用 Base64。项目创建完成之后，你可以编辑项目，转让项目，删除项目和管理项目成员等，操作按钮如下：三、选择图标，加入购物车在阿里图标库里面挑选你项目开发中所需要的图标，然后加入购物车，如下图所示四、导入购物车图标到项目当你选好了全部的图标并加入购物车之后，那么就可以将它们导入到项目了。 具体步骤：点击右上角的 【购物车】按钮，购物车按钮上会显示当前购物车有多少个图标在弹出的框中点击 【添加至项目】按钮选择创建的图标项目，我这里是刚才创建的 【DemoFontProject】点击【确定】五、下载图标文件到本地图标导入到项目之后，我们查看项目就可以看到导入的那些图标了，我们直接点击下载至本地就可以了。下载下来的是一个压缩文件，解压之后如下图：六、添加字体图标文件到项目我们在项目中的 assets 文件夹下创建一个 fonts 文件夹，然后把第五步下载下来的文件，复制到 fonts 文件夹内即可，添加好后如下图：其中 demo_index.html 和 demo.css 文件其实是可以不放入到项目中的，但是为了方便查看样式名称和对应图标，还是放入到项目中比较方便。如果你实在不想放到项目中，那就把它们删了吧，之后想查看图标样式就登录iconfont官网进入图标项目中查看即可。七、项目中使用 （这里以VUE项目为例）字体文件添加到项目中过后，我们要想在项目中使用它，还需要对样式文件进行导入，导入方法就是在main.ts中引入iconfont.css文件即可。如下图：由于我的项目是基于typescript开发的，所以文件后缀名是.ts，如果你的项目不是基于typescript开发的，则在 main.js中导入iconfont.css文件即可。然后就可以在项目中通过样式使用图标了
其中iconfont就是在【新建项目】中【Font Family】定义的名称，如果你创建项目时【Font Family】填写的是xxyy，那么使用的时候就如下使用：
我们发现所有样式名称都有相同的前缀 icon，如上面的 icon-add-circle 和 icon-arrow-up-circle都是以 icon 为前缀的，其实这也是我们在【新建项目】中【FontClass前缀】定义的。我们定义的前缀是 icon，所以它们都是以 icon 为前缀的。最后关于追加图标的问题简单说一下：如果项目进入开发阶段了，发现图标不够用，那么只需要往我们创建的图标项目中添加图标，然后重新下载文件，然后覆盖原有的 fonts 文件下的文件即可。好了，关于 iconfont 的整个使用过程就介绍完了，如有疑问，可以留言，谢谢大家：）发布于 2021-11-26 17:19Icon Font阿里巴巴集团赞同 9添加评论分享喜欢收藏申请
iconfont.cn 阿里出品的矢量图标库-阿里云开发者社区
iconfont.cn 阿里出品的矢量图标库-阿里云开发者社区
产品解决方案文档与社区权益中心定价云市场合作伙伴支持与服务了解阿里云售前咨询 95187-1 在线服务售后咨询 4008013260 在线服务其他服务 我要建议 我要投诉更多联系方式备案控制台开发者社区首页探索云世界探索云世界云上快速入门，热门云上应用快速查找了解更多问产品动手实践考认证TIANCHI大赛活动广场活动广场丰富的线上&线下活动，深入探索云世界任务中心做任务，得社区积分和周边高校计划让每位学生受益于普惠算力训练营资深技术专家手把手带教话题畅聊无限，分享你的技术见解开发者评测最真实的开发者用云体验乘风者计划让创作激发创新阿里云MVP遇见技术追梦人直播技术交流，直击现场下载下载海量开发者使用工具、手册，免费下载镜像站极速、全面、稳定、安全的开源镜像技术资料开发手册、白皮书、案例集等实战精华插件为开发者定制的Chrome浏览器插件探索云世界新手上云云上应用构建云上数据管理云上探索人工智能云计算弹性计算无影存储网络倚天云原生容器serverless中间件微服务可观测消息队列数据库关系型数据库NoSQL数据库数据仓库数据管理工具PolarDB开源向量数据库热门Modelscope模型即服务弹性计算云原生数据库物联网云效DevOps龙蜥操作系统平头哥钉钉开放平台大数据大数据计算实时数仓Hologres实时计算FlinkE-MapReduceDataWorksElasticsearch机器学习平台PAI智能搜索推荐人工智能机器学习平台PAI视觉智能开放平台智能语音交互自然语言处理多模态模型pythonsdk通用模型开发与运维云效DevOps钉钉宜搭支持服务镜像站码上公益
开发者社区
Segmentfault
文章
正文
iconfont.cn 阿里出品的矢量图标库
2021-11-15
2802
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
Iconfont.cn是阿里巴巴推出的矢量图标库，其中涵盖了1000多个常用图标，并在持续更新中。（目前已有7000+图标，部分图标为用户上传，因此默认不公开，但是可以搜索到。）
码农工程师
目录
热门文章
最新文章
为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理解决方案技术解决方案文档与社区文档开发者社区天池大赛培训与认证权益中心免费试用高校计划企业扶持计划推荐返现计划支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心关注阿里云关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务售前咨询：95187-1售后服务：400-80-13260法律声明及隐私权政策Cookies政策廉正举报安全举报联系我们加入我们阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么© 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015浙公网安备 33010602009975号浙B2-20080101-4
阿里巴巴iconfont怎么是正确的使用方式？ - 知乎
阿里巴巴iconfont怎么是正确的使用方式？ - 知乎首页知乎知学堂发现等你来答切换模式登录/注册前端开发图标Icon Font阿里巴巴iconfont怎么是正确的使用方式？自己画的svg想用font的类型引入到网页中，是不是要用iconfont上传生成代码，然后使用？求大神解答关注者383被浏览437,393关注问题写回答邀请回答好问题 11 条评论分享26 个回答默认排序班星灿最美不过飞机稿 关注图标的制作和上传可以参照官网给出的文档：Page 1图标的下载和使用官网上说的不是很清楚，简单介绍下：1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”2.选择完所有要用的图标后“存储为项目”，给它命名。然后在“图标管理”-“图标应用项目”中找到这个项目，获取在线链接，把里面的代码复制到CSS中。3.在HTML中需要使用到图标时，使用iconfont类名。
里面写上你想用的图标下面的Unicode：4.然后你可以通过控制iconfont类的属性改变图标的样式，比如：.iconfont{
font-family:"iconfont";
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
padding-left:20px
}
就可以在页面中引用和修改了。官网中还列出了使用时候的兼容性问题及其解决方法：Page 2这些图标也可以下载到本地使用。图标都加入暂存架后选择“下载到本地”，会得到以下几个文件：浏览器打开demo.html可以看到每个图标的Unicode，把iconfont.css里的代码复制到css里面，把下面四个文件放到css可以引用到的文件夹里就可以了。下载使用的一个缺点是添加图标的话要重新把所有图标再下载一遍覆盖原来的文件，如果是在线链接只要重新生成一次链接就好了。编辑于 2015-11-12 18:33赞同 14627 条评论分享收藏喜欢收起知乎用户自从有了阿里巴巴字体图标库 设计小伙儿都变懒了发布于 2016-06-28 14:07赞同 493 条评论分享收藏喜欢
阿里iconfont的使用教程来啦！-即时设计
阿里iconfont的使用教程来啦！-即时设计
设计社区
我们的优势
设计教程
帮助中心
最新功能
下载
定价
关于我们
免费使用
设计文章
> 阿里iconfont的使用教程来啦！
阿里iconfont的使用教程来啦！
更新时间：2023-12-22 11:34:59
阿里 iconfont 相信各位设计师朋友并不陌生，他是由阿里巴巴集团推出的一个提供千万级免费矢量图标的素材站，由优秀的设计师创作并分享，大部分都是支持我们直接免费使用的。阿里 iconfont 的矢量图标无论是从数量上来讲还是从质量上来讲，都是杠杠的，十分不错，有很多设计师、业余爱好者、设计小白都会借鉴阿里 iconfont 的设计作品。那么阿里 iconfont 的图标具体要怎么下载使用呢？如何快速运用到我们自己的设计作品中去呢？今天阿里 iconfont 的使用教程来啦，2 个方法帮你快速使用阿里 iconfont 的图标素材，一起来看！1、阿里 iconfont 官网1、搜索阿里 iconfont 进入官网2、点击 iconfont 图标库进入阿里 iconfont 图标资源库，我们可以阿里 iconfont 图标库按照官方、多色、单色图标库以及所有图标集合分为了 4 类，都来自各地的优秀设计师之手。3、选择并下载 icon 图标我们可以选择一套满意的 icon 图标并下载。需要注意的是阿里 iconfont 的图标库资源并不是全部都免费的，有的支持商用有的不支持，我们下载时要了解清楚，以免产生不必要的版权纠纷。阿里 iconfont 的图标素材支持下载多种格式，我们可以根据自己的实际使用需要选择适合的素材文件格式。2、阿里 iconfont 插件刚刚我们介绍了阿里 iconfont 官网下载免费矢量图标素材的教程，总的来说还是还是比较麻烦的，而且下载完成后还要导入到设计作品里，时间成本增加。所以今天我们还要给大家介绍另外一种阿里 iconfont 图标直接拖拽到设计作品里的方式，简单高效，一步到位。我们设计好一个作品后，只需要在即时设计的资源社区里搜索 iconfont 插件，然后打开使用即可，支持一键搜索 iconfont 站内图标并直接拖拽到编辑界面，1600W+ 精美图标即拿即用，而且他还可以帮我们实现使用前可自定义图标尺寸和颜色，省去后续调整步骤，效率咔咔涨。点击图片即可体验高效便捷的阿里 iconfont 插件以上就是关于阿里 iconfont 使用教程的全部内容啦，一共给大家分享了 2 个方法，都可以帮助大家实现使用阿里 iconfont 千万级矢量图标素材的目的，相对来说，使用即时设计的 iconfont 插件会更快，质量也会更好。在即时设计，不只是阿里 iconfont 图标资源可以一键免费用，他的资源社区还有丰富多元的 UI 设计资源也同样支持一键免费套用，高质量设计作品输出毫无负担，工作更轻松！感兴趣的话不妨就试一试吧，说不定会有不少意外收获~希望今天的内容能对你在阿里 iconfont 的使用下载上有所帮助。
立即体验 即时设计
免费在线协作设计工具
云端操作存储
无需下载安装
上万款素材资源
即拿即用
原生中文，比Figma
更懂中国设计师
个人/中小团队
均免费使用
立即体验 即时设计
设计软件推荐
Figma
Figma 是一款基于浏览器、可协作的UI设计工具,你可以在...
最新设计文章
4个优质的Logo设计素材网站给你无限灵感！
中国大学生广告艺术节学院奖是什么？含金量很高！
含金量高的设计大赛有哪些？这几个超级牛！
大广赛获奖作品在哪里看？免费独家盘点在这里！
哪些在线画图工具能够标尺寸？
7个适合大学生参加的设计类比赛，含金量高！
相关内容推荐
icon制作设计规范大汇总！
在线图标制作工具推荐，自定义图标更简单！
几何元素图标如何设计？最全教程来啦！
3个高质量Icon图标资源网站推荐
APP启动图标应该如何设计？
分享4个UI图标素材下载网站
免费使用 即时设计
北京雪云锐创科技有限公司 | 京ICP备16060150号-2
Copyright © 2021 Js.Design Inc. All rights reserved.
产品
设计工具
原型工具
PRD 文档
为什么选我们
角色功能介绍
向同事介绍我们
服务
帮助中心
最新功能
服务条款
开发者中心
公司
关于我们
加入我们
成长历程
媒体报道
设计专题
Figma
Sketch
PS
XD
Axure
AI
设计文章
联系我们
010-57296155
contact@xiaopiu.com
用户交流群
微信公众号
iconfont-阿里巴巴矢量图标库使用教程_iconfont阿里巴巴-CSDN博客
>iconfont-阿里巴巴矢量图标库使用教程_iconfont阿里巴巴-CSDN博客
iconfont-阿里巴巴矢量图标库使用教程
张时贰
已于 2022-04-18 16:15:17 修改
阅读量1w
收藏
33
点赞数
5
分类专栏：
Web前端技术基础
文章标签：
前端
css
html5
网页设计
web
于 2021-12-27 18:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49488584/article/details/122162922
版权
Web前端技术基础
专栏收录该内容
2 篇文章
3 订阅
订阅专栏
iconfont-阿里巴巴矢量图标库使用教程
文章目录
iconfont-阿里巴巴矢量图标库使用教程一、前言二、使用步骤三、运行效果
一、前言
iconfont-阿里巴巴矢量图标库 矢量化图标可以协助我们制作HTML，比直接插入img更快捷，页面效果也更好。它有很多优点：
图标矢量化我们在最初推行 iconfont 的时候就是为了在Retina设备上也能「丝般柔滑」，这一点图片需要另外制作两倍图，而且缩放后立马就「有码了」。在制作上，不单单是图标设计为两倍就完事了，需要在整个页面设计的时候就要是两倍尺寸的，这对于设计师来说，成本太大（虽然这是趋势）。 让样式回归CSS具体而言，就是指使用iconfont后，因为图标就是字体。我们可以用CSS来灵活控制图标的大小、颜色、阴影等。传统的 CSS Sprites 我们只能重新设计后再「切图」，虽然现在有很多自动拼合工具，但是依然繁琐。进一步的，如果不用兼容IE6-7后，我们完全可以用CSS伪元素来生成图标。也就是说假如图标编码改变了，不用再改动HTML中的编码，只用修改 content 中的编码，达到真正目的上的CSS来控制图标。 图标规范化通过iconfont平台，我们可以高效快速的生产出规范的图标。现在可以直接通过平台上传SVG或ESP文件，就可以转换成字体图标了。 自动上传到阿里云CDN通过平台生成的字体，自动存储到阿里云CDN，免费加速。 流量最小化在移动设备，节约流量是我们前端把控用户体验关键而又容易忽视的一个环节。通常一个项目中，我们并不需要一套大而全图标库，也许我只是需要其中的一个关闭按钮(o)/~。通过平台可以点选自己需要的图标，重新生成一份字体，减少字体体积，节约流量的同时带来更快的加载速度。
二、使用步骤
1.打开iconfont-阿里巴巴矢量图标库，搜索图标，选择合适的图标批量加入购物车(如果是单个矢量图直接下载也可以)
2.在右侧点击购物车
3.在购物车中，推荐是使用添加项目，在账户内新建一个项目下次使用的时候，方便下载。这里我们用作HTML开发所以点击下载代码。(下载素材是用于SVG、AI、PNG的）
4.下载项目需要的矢量图，第三步点击下载代码可以跳过这步。
5.将下载好的压缩包解压，以下文件全部导入HTML项目下css文件中
7.在iconfont.css中可以设置图标的样式，这里我默认，一般不作修改。
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
如果想单独修改某个图标的大小样式，可以为span标签单独设置一个class
.iconfont2 {
font-family: "iconfont" !important;
font-size: 160px;
font-style: normal;
color: #BD2C00;
background-color: #B3D4FC;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
8.在HTML文件中，第六行导入刚刚下载的iconfont.css,第九行挑选相应图标并获取字体编码，应用于页面
三、运行效果
关注博主即可阅读全文
优惠劵
张时贰
关注
关注
5
点赞
踩
33
收藏
觉得还不错?
一键收藏
知道了
0
评论
iconfont-阿里巴巴矢量图标库使用教程
iconfont-阿里巴巴矢量图标库使用教程文章目录iconfont-阿里巴巴矢量图标库使用教程一、前言二、使用步骤三、运行效果一、前言iconfont-阿里巴巴矢量图标库矢量化图标可以协助我们制作HTML，比直接插入img更快捷，页面效果也更好。它有很多优点：图标矢量化我们在最初推行 iconfont 的时候就是为了在Retina设备上也能「丝般柔滑」，这一点图片需要另外制作两倍图，而且缩放后立马就「有码了」。在制作上，不单单是图标设计为两倍就完事了，需要在整个页面设计的时候就要
复制链接
扫一扫
专栏目录
CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)
11-21
进入阿里巴巴矢量图标库
阿里巴巴矢量图标库
选择喜欢的图标的，点击添加到库
选择完之后，点击右上角的购物车图标（前提是已经登录，推荐使用GitHub登录）
然后在右侧中点击添加至项目
之后在个人主页中可以看见
1.Unicode
2.Font class
此次便是对于这两个的使用
Unicode
开始进入时，会自动生成代码，如果没有，则点击生成
例:
@font-face {
font-family: 'iconfont'; /* project id 1743720 */
src: url('//at.alicdn.com/t/font_17437
总结：引入Iconfont-阿里巴巴矢量图标库的三种方式，小白必看，看了就会~
止水Itachi
06-11
4033
1、首先，百度搜索“阿里矢量库”，点进去，然后注册一个账号登录进入。
2、比如你想要的一个购物车图片，搜索框里输入“购物车”，点击搜索。
3、选择加入你想要的购物车图标，点击框住的购物车图标，不要点线面的下载图标哦
4、此时在你的右上角购物车中已加入进去，当然，你可以选择同时加入多个图标进入你的购物车，在这里我加入了两种图标。
5、点开你的右上角购物车，选择“添加至项目”。
6、点击新建文件夹
7、随意命名，在这里我命名为“举例子”，然后确定。
8、未完待续，明天更新。。。
...
参与评论
您还未登录，请先
登录
后发表或查看评论
阿里iconfont使用方法
QW's Blog
02-14
6779
阿里巴巴iconfont的使用方式分为两种：
本地使用
线上引用
iconfont-阿里巴巴矢量图标库
0.前期准备
使用时先到网站上选中需要使用的图标添加至项目
1.本地使用
1.下载项目至本地
2.解压到项目中
3.在页面中引入样式
@font-face {
font-family: 'iconfont';
src: url([removed]AAEAAAANAIAAAwBQRkZUTYTHwTUAAAfIAAAAHEdERUYAKQAMAAAHqAAAAB5PUy8yVu
阿里巴巴矢量图标库 iconfont 的使用方法
飞飞程序员
04-29
4559
xx-blog主题使用的图标库是阿里巴巴的iconfont，因此这里介绍一下此主题库的用法。
首先去iconfont主题库，注册一个账号，然后就可以找自己喜欢的图标了，找到后点击添加购物车，就会到了右侧的购物车中，然后去个人中心下载即可。
手把手教你 iconfont 导入使用及相关配置
Brod-Roy的博客
12-12
5934
iconfont是阿里旗下的一套图标库，UI设计师设计号图标后，会将图标上传到iconfont的项目库中。前端开发人员需要下载项目图标，并在项目中使用。
阿里巴巴矢量图标的使用
qq_63605696的博客
11-22
4372
阿里巴巴图标本质就是字体，使用方法分为两种，一种是本地下载字体使用，另一种是在线链接使用。我已经建好一个名为测试的项目了，没有的新建一个就好。中的字体文件和网页放在同一个文件夹中。找到自己想要的图标添加到购物车。3.本地创建好网页，将下载的。查看项目仓库里面的图标。
使用阿里巴巴IconFont的方法
蜗牛在奔跑的博客
03-04
505
第一步.注册登录
https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.6
第二步
选择图标----创建项目---将图标添加到项目
第3步生成代码
第4步 拷贝代码：
@font-face {
font-family: 'iconfont'; /* project id 3221706 */
src: url('');
src: url('?#iefi...
阿里巴巴图标矢量库使用方法详解，适用于各种框架
qq_61838643的博客
08-10
2854
官网使用了三种方法，我将逐一讲解，有不对之处还请各位大佬指正添加到购物车，选择完成后点击上方导航栏图标之后选择添加至项目（没有项目可以临时创建一个）选择完成之后会自动跳转至资源管理界面，查看刚才的选择的图标如果是vue项目，可以把代码复制在app.vue的style标签里，如果没有使用框架，直接写在css文件里引入即可。
微信小程序 如何引入外部字体库iconfont的图标
11-26
如何引入外部字体库iconfont的图标，具体如下
直接使用阿里巴巴的网络路径
选择iconfont图标
官网：阿里巴巴矢量字体库
步骤：阿里巴巴字体库使用方法
全局引入app.wxss
@font-face {
font-family: 'iconfont'; /* project id 518032 */
src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot');
src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot?#iefix') for
详解mpvue小程序中怎么引入iconfont字体图标
12-03
前言
iconfont阿里巴巴矢量图标库是我很喜欢的一个网站，可以下载/在线编辑/上传自己需要的矢量图标，也支持团队协作，那么在mpvue项目中如何引入呢？
iconfont阿里巴巴矢量图标库
将图标加入购物车
搜索关键词可以是中文也可以是英文
下载素材
点击网站右上角的购物车图标，此处我们选第三个
ps:添加到项目很有用，可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等，此处我们选择加入项目并下载代码
文件解压
一般网页中为了兼容性考虑，我们会留下css/ttf/svg/woff/eot文件，小程序中则有自己的规则，此处我们留下css和ttf文件，关于怎么处理请继续阅读
iconfont的三种使用方式详解
01-19
在我们项目中经常要使用到iconfont，在此我们使用阿里巴巴矢量库提供的icon图标，此图标库足够为我们提供大量的图标，我们首先需要的事在阿里巴巴矢量图标库新建一个自己的账号，并且新建一个项目，这个项目包含了你所有要用到的图标。我们需要选中需要的图标放到自己的项目中，并下载下来放到自己项目下的iconfont文件夹之下。（需要更新图标时，下载包也需要重新下载更新）
方式一：使用symbol方式（本质是用svg标签构成的）
第一步：为了代码更好的复用，我们封装一个svg-icon组件，代码如下：