- 综合排序
- 最热优先
- 最新优先
- 来自专栏天天
iconfont的使用
/SL%20img/one/iconfont.css"> <! --引入矢量图路劲--> </head> <body>
<!74620发布于 2018-09-29来自专栏IMWeb前端团队浅尝iconfont
1. iconfont简介 什么是iconfont？正如字面意思，就是图标字体，下面我给大家慢慢道来 web页面包含什么元素？ 使用iconfont 虽然使用iconfont没有图片那么简单，但也没有想象中那么难，下面来看看怎么使用iconfont 首先，你需要制作iconfont，现在有许多iconfont的站点，比如fontello ，非常灵活小巧 现在很多项目已经在使用iconfont，先不说国外，比如国内，阿里巴巴各个平台（不仅pc，h5，还有app）已经全面使用iconfont，并且阿里巴巴还搭建了一个线上iconfont站点 使用（里面包含了各个平台的使用方法）都有很完善的说明 3.2 iconfont缺点 制作iconfont需要svg设计稿，对于开发来说没有图片来的方便 iconfont有些特有的问题，详情可参考@font-face iconfont也是需要svg资源的，所以两者其实很类似 另外，阿里巴巴主要业务都已经广泛应用iconfont，并且还有成熟的线上站点支持，最起码在可行性方面是可以不用过多考虑的，虽然在使用iconfont
2.7K70发布于 2017-12-29来自专栏IMWeb前端团队浅尝iconfont
本文作者：IMWeb 黎清龙 原文出处：IMWeb社区 未经同意，禁止转载 1. iconfont简介 什么是iconfont？ 使用iconfont 虽然使用iconfont没有图片那么简单，但也没有想象中那么难，下面来看看怎么使用iconfont 首先，你需要制作iconfont，现在有许多iconfont的站点，比如fontello ，非常灵活小巧 现在很多项目已经在使用iconfont，先不说国外，比如国内，阿里巴巴各个平台（不仅pc，h5，还有app）已经全面使用iconfont，并且阿里巴巴还搭建了一个线上iconfont站点 使用（里面包含了各个平台的使用方法）都有很完善的说明 3.2 iconfont缺点 制作iconfont需要svg设计稿，对于开发来说没有图片来的方便 iconfont有些特有的问题，详情可参考@font-face iconfont也是需要svg资源的，所以两者其实很类似 另外，阿里巴巴主要业务都已经广泛应用iconfont，并且还有成熟的线上站点支持，最起码在可行性方面是可以不用过多考虑的，虽然在使用iconfont
1.7K20发布于 2019-12-03来自专栏Java工程师成长之路iconfont采坑
1. iconfont采坑 1.1. 前言 使用iconfont过程中踩过坑特此记录 不知道iconfont的这里也简单介绍一笔，阿里开放的一个图标素材库，用来快速找图标下载使用图标 iconfont网址 1.2. 所谓单色 iconfont中有些图标，看着是单色的，也就是整体单色，中间有些白，但是白色和无色还是有区别的啊，当我拿了一个蓝白相间的图标过去赋值个颜色,这个图片就整个一块同色区，所以选图标的时候要看仔细了 1.3. iconfont的三种使用模式 1.3.1. unicode 最原始的使用方式，也是最通用的，支持范围最广，但只支持单色 1.3.2. font class 兼容性较好，语义明确，书写更简单，
97031发布于 2019-09-10来自专栏iOS 备忘录iOS使用IconFont
IconFont的使用 github链接 背景： 最近设计提了要求，切图用IconFont 一开始，在搜了IconFont的使用后，选中了TBCityIconFont，使用了之后，发现对于图片的支持不太好 edgeInsets.right // 运算符优先级注意 rect.size.height -= edgeInsets.top + edgeInsets.bottom ...xxx 使用 来自iconfont Code example in Swift 3. iconfont怎么在iOS中使用了 Iconfont-阿里巴巴矢量图标库 github Iconic
1.8K32发布于 2021-03-01来自专栏coding个人笔记字体图标iconfont
字体图标使用不同公司项目要自己判断，这边推荐使用阿里字体图标： http://iconfont.cn/home/index 搜索需要的图标： ? 把想要的图标选中： ? 点击右上角： ? Font：兼容性良好，支持ie8+，及所有现代浏览器，不支持多色，使用class来定义图标，。
2.8K10发布于 2020-04-24来自专栏vue的实战vue中使用iconfont
购物车中的图标 添加至项目 第五步： 下载至本地---- 点击下载至本地按钮 下载至本地 第六步： 解压下载的压缩文件----整理放入vue中的static中（在static中新建文件夹 icon ），同时直接把iconfont.css /static/iconfont.css" 第八步： 使用iconfont 不同的图标 只是span的内容不一样， 图标 vue报错原因： 没有npm install css-loader -s 没有修改iconfont的URL的引用地址 没有在main.js中引入iconfont.css 各位，今天的分享到这里，谢谢大家的阅读
1.2K20发布于 2019-08-28veu——引入iconfont图标
我这里是阿里的iconfont图标，如何下载请看下面这个博文 https://www.cnblogs.com/wangyang0210/articles/9248324.html 创建文件夹 在assets 下创建iconfont文件夹，存放下载好的iconfont文件 导入 在main.js中导入css文件 import '. /assets/iconfont/iconfont.css'; 引用 页面中使用
16210编辑于 2024-08-16来自专栏向全栈出发Flutter Icon IconFont（图标控件）
1、优 Flutter中，可以像Web开发一样使用iconfont，iconfont即“字体图标”，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。 效果如下图： 控制不同颜色和大小的icon 在Flutter开发中，iconfont和图片相比有如下优势： 1.体积小：可以减小安装包大小。 2.矢量的：iconfont都是矢量图标，放大不会影响其清晰度。 3.可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。 4.可以通过TextSpan和文本混用。 而在iconfont中，只是将位码对应的字形做成了图标，所以不同的字符最终就会渲染成不同的图标。 取出.ttf文件 解压代码包，将iconfont.ttf文件取出。 导入iconfont.ttf文件 假设我们的字体图标文件保存在项目根目录下，路径为"fonts/iconfont.ttf"。
4.6K10发布于 2020-09-10来自专栏全栈程序员必看iconfont的使用方法
一、iconfont的使用 登录http://www.iconfont.cn/ 阿里巴巴矢量图标库，github或微博登录 选择喜欢的图标添加入库 然后点击右侧购物车，点击最下面的‘下载代码’按钮，下载保存到本地 url('iconfont.eot');/* IE9*/ src: url('iconfont.eot? url('iconfont.svg#iconfont') format('svg');/* iOS 4.1- */ } 第二步：定义使用iconfont的样式 .iconfont{ font-family :"iconfont" ! /iconfont.css"> 第二步：挑选相应图标并获取类名，应用于页面： （3）symbol引用 这是一种全新的使用方式，应该说这才是未来的主流
1.7K20编辑于 2022-11-17来自专栏程序员成长指北转转搭建 iconfont 平台实践
所以 iconfont 平台的系统架构由以下几个部分组成： iconfont icon：对上传的 svg 文件统一处理，保存完整的路径信息 大库：和 icon 建立映射关系，对 icon 进行分组、编辑 @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot? ) format('truetype'), url('iconfont.svg#iconfont') format('svg'); } 定义使用 iconfont 的样式 .iconfont{ font-family: "iconfont" ! 后续 iconfont 平台也会进一步提高体验，比如这两天淘宝 iconfont 团队分享的文章，iconfont 支持全新的彩色字体图标，就很值得关注和跟进，彩色化一定会让 iconfont 有更广阔的应用前景
1.6K20发布于 2021-09-22来自专栏加菲猫的VFPuniapp 中使用 iconfont
uniapp 中使用彩色的 iconfont 1、在自己图标库项目中下载到本地： 2、解压 3、shift+右键 打开powershell 窗口 执行一下代码 npm install -g iconfont-tools 4、在步骤2解压的文件中 执行命令行 （shift+右键 打开powershell 窗口 也行） iconfont-tools 按一下操作 5、目录会多了个iconfont-weapp文件 进入文件把 iconfont-weapp-icon.css复制到 static 文件中 6、在app.vue中导入 @import '. iconfont-weapp-icon.css中查看类 上半部分引用于 uniapp 中使用彩色的 iconfont - 京鸿一瞥 - 博客园 (cnblogs.com) 非彩色的 一、Unicode
1.4K10编辑于 2023-09-11来自专栏全栈程序员必看阿里iconfont使用方法
阿里巴巴iconfont的使用方式分为两种： 本地使用 线上引用 iconfont-阿里巴巴矢量图标库 0.前期准备 使用时先到网站上选中需要使用的图标添加至项目 1.本地使用 1. /iconfont/iconfont.woff2?t=1626747157081') format('woff2'), url('./iconfont/iconfont.woff? /iconfont/iconfont.ttf? t=1626747157081') format('truetype'); } .iconfont { font-family: "iconfont" ! { font-family: "iconfont" !
89920编辑于 2022-11-17来自专栏万丈高楼平地起字体图标iconfont的使用
/iconfont.css"> 第二步：挑选相应图标并获取类名，应用于页面： <! class="<em>iconfont</em> icon-ziyuan">购物车
<span class="<em>iconfont</em> icon-gerenzhongxin @font-face { font-family: "iconfont"; src: url("iconfont.eot"); src: url("iconfont.eot? ") format("woff"), url("iconfont.ttf") format("truetype"), url("iconfont.svg#iconfont") format( "svg"); } 第二步：定义使用 iconfont 的样式 .iconfont { font-family: "iconfont" !
5.2K20编辑于 2022-03-09来自专栏强仔博客iconfont的几种引用方式
说起阿里的iconfont，肯定都用过FontAwesome，相比之下，二者都是免费的图标，引用方式大差不差。 从兼容性的方面来讲，iconfont支持所有低版本浏览器，而FontAwesome只支持IE7+的高版本浏览器，从图标美感和数量方面来讲，这都不用比，显然iconfont更胜一筹，从使用上讲，iconfont 也更为灵活，不像FontAwesome那样，需要引入整个文件包里的文件到项目，显得臃肿，FontAwesome有文档支持，而iconfont在下载添加图标时会有一个demo文件供参考，也是一个不错的参考方法 false,showThumbByDefault: false,autoplayControls: false});}); 在我们的压缩包里，需要把这几个文件复制到我们的项目里 引入css，设置类iconfont
1.3K20编辑于 2021-12-21mpvue——引入iconfont字体图标
本地引入 下载好的字体图标放在static目录下,我是自己又创建了一个iconfont目录便于区分,我是全引入的,如果后面出现问题再更改 引入 在App.vue中引用 @import "./.. /static/iconfont/iconfont.css"; 重新编译 $ npm run build 使用
1效果 在线引入 这个其实就是把本地的iconfont的文件里的本地地址替换成线上的地址，好处显而易见的是本地文件包小了，但是如果网络不好肯定会造成暂时的iconfont丢失的情况 生成在线链接 进入阿里巴巴的官网 替换链接 本地的iconfont的所有文件都可删除，只留一个css的即可。 然后将复制的在线链接替换到本地即可。 编译 新增页面或者文件的时候都需要重新build，如果只是改动代码的话只需要npm run dev即可 $ npm run build 使用 <div class=" <em>iconfont</em> icon-shouqbula37310编辑于 2024-08-16来自专栏快乐阿超代码方式引入iconfont图标
——黑格尔 前端开发中，经常会遇到需要引用图标的情况 我们可以在iconfont寻找我们需要的图标 https://www.iconfont.cn/ 比如这两个图标，我非常喜欢，我可以使用直接下载的方式引入图标 然后到我们的购物车结算 点击添加至项目 登录账号 然后再次点击添加至项目后会弹出加入项目，我们可以新建一个项目 确定后，我们就可以在这里点击生成代码 然后复制代码 粘贴到项目css中 然后定义使用iconfont 的样式 .iconfont{ font-family:"iconfont" !
1.4K10编辑于 2022-08-17来自专栏IMWeb前端团队Iconfont在教育平台的实践
矢量图，两个方案，svg和iconfont。svg雪碧图只兼容IE9+，而平台仍需要支持IE8的用户，为了避免矢量图和位图两套方案，选择了兼容性更好的iconfont，可以完美兼容到IE6。 适用场景及大小对比 矢量图，缩放不失真，代替不同大小、颜色的多icon 单色icon（支持CSS3渐变色） 平台有319个图标（共655KB）适合做iconfont 图片与iconfont大小对比： ? 很明显，合并后的iconfont只有之前图片雪碧图的8%，不足10KB。 体系化解决方案 iconfont效果明显，业务场景适用，我们到底该如何使用？ 给出的推荐写法是： [@font-face](/user/font-face) { font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?
1.7K20发布于 2019-12-03来自专栏HTML5学堂iconfont字体图标库
HTML5学堂小编的话：昨日发布的iconfont的内容有些不足，对于可能不太了解iconfont和特殊字体的学习者来说，可能会存在一定的理解问题，在此针对昨日内容进行补充，详细讲解。 字体相关知识 了解iconfont（字体图标）前我们先了解下字体，因为iconfont的实现与字体息息相关，所以掌握字体相关知识便于理解iconfont。接下来看一个简单的例子 <! iconfont是什么 相信大家看到这边更进一步了解了网页字体的渲染流程，接下来我们来看看iconfont。 将iconfont拆开来看，就是icon（图标）和font（字体）。 iconfont有什么优势与劣势 iconfont的优势 1、相比图片的大小容量，iconfont几乎是羽翼级轻量。 2、图标都被打包在字体库里面，减少了HTTP的请求数量，加速网页加载速度。 2、因为iconfont跟字体有关，所以它很容易受到字符编码的影响。 iconfont的使用 平时的网页开发该如何使用iconfont？
6.1K60发布于 2018-03-13来自专栏IMWeb前端团队Iconfont在教育平台的实践
矢量图，两个方案，svg和iconfont。svg雪碧图只兼容IE9+，而平台仍需要支持IE8的用户，为了避免矢量图和位图两套方案，选择了兼容性更好的iconfont，可以完美兼容到IE6。 适用场景及大小对比 矢量图，缩放不失真，代替不同大小、颜色的多icon 单色icon（支持CSS3渐变色） 平台有319个图标（共655KB）适合做iconfont 图片与iconfont大小对比： ? 很明显，合并后的iconfont只有之前图片雪碧图的8%，不足10KB。 体系化解决方案 iconfont效果明显，业务场景适用，我们到底该如何使用？ 给出的推荐写法是： [@font-face](/user/font-face) { font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?
2.2K70发布于 2018-01-08
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号