前言

一、在线链接

二、下载至本地

1、处理下载的文件

2、使用 Font class

三、上传图标至项目

四、问题踩坑记

1、iconfont的图标使用的时候怎么调整大小？

2、iconfont的图标使用的时候怎么指定颜色？

3、采用的是下载至本地方案，在合并代码时遇到了 iconfont 相关文件冲突时怎么办？

前言

iconfont-阿里图标库：iconfont-阿里巴巴矢量图标库

单个使用 iconfont 就不说了， iconfont 的官方使用说明中已经说明了。

看了官网给的使用说明，主要是内容如下：

Web 端使用
- icon 单个使用
- unicode 引用
- font-class 引用
- symbol 引用
Android 使用
iOS 使用

除了以上基本的使用 iconfont 的方式之外，还可以像下面这样使用 iconfont。

一、在线链接

以 Unicode 为例：

在 unicode 下，每个 icon 都有一个 unicode 编码，下面以 unicode 编码为`3 `的 icon 为例进行说明。

选择查看在线链接，然后复制在线生成的代码，比如下面是我复制的代码：

@font-face {font-family: 'iconfont';  /* project id xxx */src: url('//at.alicdn.com/t/font_2026649_mktdfwuze6.eot');src: url('//at.alicdn.com/t/font_2026649_mktdfwuze6.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_2026649_mktdfwuze6.woff2') format('woff2'),url('//at.alicdn.com/t/font_2026649_mktdfwuze6.woff') format('woff'),url('//at.alicdn.com/t/font_2026649_mktdfwuze6.ttf') format('truetype'),url('//at.alicdn.com/t/font_2026649_mktdfwuze6.svg#iconfont') format('svg');
}

将此代码放进一个全局的样式文件中，比如 iconfont.less 文件：

// iconfont.less 文件

@font-face {font-family: 'iconfont';  /* project id xxx */src: url('//at.alicdn.com/t/font_2026649_mktdfwuze6.eot');src: url('//at.alicdn.com/t/font_2026649_mktdfwuze6.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_2026649_mktdfwuze6.woff2') format('woff2'),url('//at.alicdn.com/t/font_2026649_mktdfwuze6.woff') format('woff'),url('//at.alicdn.com/t/font_2026649_mktdfwuze6.ttf') format('truetype'),url('//at.alicdn.com/t/font_2026649_mktdfwuze6.svg#iconfont') format('svg');
}.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;
}

在页面中使用的时候：

<i class="iconfont">&#x33;</i>

若在线 icon 有更新，需要“选择查看在线链接”，然后复制在线生成的代码，在项目中的 iconfont.less 文件中将最新的代码替换就好了。

请看一看 iconfont 的官方使用说明。

二、下载至本地

在 unicode 下，点击 “下载至本地”。

1、处理下载的文件

参考 "在线链接" 处生成的文件链接，例如：

@font-face {font-family: 'iconfont';  /* project id xxx */src: url('//at.alicdn.com/t/font_2026649_mktdfwuze6.eot');src: url('//at.alicdn.com/t/font_2026649_mktdfwuze6.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_2026649_mktdfwuze6.woff2') format('woff2'),url('//at.alicdn.com/t/font_2026649_mktdfwuze6.woff') format('woff'),url('//at.alicdn.com/t/font_2026649_mktdfwuze6.ttf') format('truetype'),url('//at.alicdn.com/t/font_2026649_mktdfwuze6.svg#iconfont') format('svg');
}

在生成的链接的url里，找到资源的扩展名，如：.eot、.ttf、.svg等，记为 资源的扩展名。

将下载的压缩文件解压并打开该 iconfont 文件夹，里面会有一些文件，如下图：

将于资源的扩展名不符合的文件删除，然后将处理后的 iconfont 文件夹整个放入到你开发的项目的静态资源目录下（一般是public或是assets文件夹下）。

处理后，该文件夹的文件还剩：

以 assets 文件夹为例，书写 iconfont.less 文件（我的项目里用的是 less）：

//  iconfont.less 文件@font-face {font-family: 'iconfont';src: url('../assets/iconfont/iconfont.eot');src: url('../assets/iconfont/iconfont.eot?#iefix') format('embedded-opentype'),url('../assets/iconfont/iconfont.woff') format('woff'),url('../assets/iconfont/iconfont.ttf') format('truetype'),url('../assets/iconfont/iconfont.svg#iconfont') format('svg');
}.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;&.small {font-size: 12px;}&.big {font-size: 18px;}
}

2、使用 Font class

“下载至本地” 和 “Font class” 更配哦。

在 iconfont 文件夹里，我们可以看到有一个 iconfont.json 的配置文件，该文件配置了已添加的所有 icon，并且已经生成了各自的 unicode 编码。

于是，我们可以在 iconfont.less 文件中使用 iconfont.json 的配置文件里提供的 unicode 编码，来自定义 font class 类型。

举个例子：

// iconfont.json 文件{"id": "xxx","name": "myDemo","font_family": "iconfont","css_prefix_text": "icon-","description": "","glyphs": [{"icon_id": "21556977","name": "编辑","font_class": "bianji","unicode": "e7c1","unicode_decimal": 59077}]
}

// iconfont.less 文件// ...（此处为上面已写的代码）.edit_icon:before {content: "\e7c1";
}

在页面中使用的时候：

<i class="iconfont edit_icon"></i>

三、上传图标至项目

暂未用过这种方式，待实践。

四、问题踩坑记

1、iconfont的图标使用的时候怎么调整大小？

font-size 就可以。

2、iconfont的图标使用的时候怎么指定颜色？

color 就可以。

3、采用的是下载至本地方案，在合并代码时遇到了 iconfont 相关文件冲突时怎么办？

先合并代码，遇到冲突后，在当前冲突的分支上，去 iconfont 下载最新的“下载至本地”的包，然后将该删的删掉，最后替换掉当前冲突的对应的文件。提交代码就可以了。

iconfont-阿里图标库的使用相关推荐

vue+element 使用iconfont (阿里图标库)
步骤一(找到自己要引入的图标,如果已经找到只是不会引入,请直接查看步骤二): 准备:首先进入阿里图标库,登录自己的账号,在下图位置输入想搜索的图标,例如:'退出' 随便选一个自己想要的如图把鼠标移动 ...
优秀工具介绍之——Iconfont 阿里图标库
阿里妈妈MUX倾力打造的矢量图标管理.交流平台. 设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用. 官网地址: h ...
vue中通过在线链接使用iconfont阿里图标库FontClass
看项目原来的都是将图标下载到本地,然后引入css文件.查了些文章也都是介绍的,先将图标下载到本地再导入. 那么在项目开发中,时不时就会需要加入新的图标.这时候每次都要重新将图标下载到本地再导入.觉得十 ...
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 2018-11-9更新 VX号: LJT-917 这是我的微信公众号全是技术文章: 1.傻瓜式引用:由于这种方法及其 ...
开发辅助 | 阿里图标库iconfont入门使用
目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...
使用在线链接阿里图标库（iconfont）(vue)
1.阿里图标库网址 https://www.iconfont.cn/ 2.搜索–>图标名称–>鼠标移入图标->加入购物车–>点击购物车–>添加至项目 2.点击Font c ...
阿里图标库iconfont如何使用
1.在阿里图标库(http://iconfont.cn/)选择自己喜欢的一个或多个图标,效果如下图所示 2.网页右上角的小购物车, 3.这里我们选择下载代码.下载好了后在项目需要的地方解压. 4.这是 ...
Vue如何使用iconfont（阿里图标库）
1.在iconfont上任意方式登录 2.选择图标管理下,我的项目 3.新建一个项目(如果已有项目可忽略) 4.创建好之后就可以找自己要用的图标,添加到自己的项目里 5.图标添加完毕后,再次回到我的项 ...
html使用阿里图标库（iconfont）制作字体图标
话不多说,先看一下效果图: 一.通过阿里图标库生成iconfont.css 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2. ...
java怎么引入矢量图标库,阿里图标库怎么使用?阿里图标库iconfont如何使用
阿里图标库怎么使用?阿里图标库iconfont如何使用网际网络测评网络评测 2020-3-17 2581 0评论阿里图标库Iconfont-国内功能很强大且图标内容很丰富 ...

iconfont-阿里图标库的使用

前言

一、在线链接

二、下载至本地

1、处理下载的文件

2、使用 Font class

三、上传图标至项目

四、问题踩坑记

1、iconfont的图标使用的时候怎么调整大小？

2、iconfont的图标使用的时候怎么指定颜色？

3、采用的是下载至本地方案，在合并代码时遇到了 iconfont 相关文件冲突时怎么办？

iconfont-阿里图标库的使用相关推荐

最新文章

热门文章

iconfont-阿里图标库 的使用

前言

一、在线链接

二、下载至本地

1、处理下载的文件

2、使用 Font class

三、 上传图标至项目

四、问题踩坑记

1、iconfont的图标使用的时候怎么调整大小？

2、iconfont的图标使用的时候怎么指定颜色？

3、采用的是下载至本地方案，在合并代码时遇到了 iconfont 相关文件冲突时怎么办？

iconfont-阿里图标库 的使用相关推荐

最新文章

热门文章

iconfont-阿里图标库的使用

三、上传图标至项目

iconfont-阿里图标库的使用相关推荐