java怎么引入矢量图标库,阿里巴巴矢量图标库Iconfont的使用方法

前言

现在网络上有很多矢量图标库，但是能自定义的却很少，不能自定义的体积就很大，造成不必要的浪费。阿里巴巴矢量图标库Iconfont很好的规避了这个问题，能够自定义添加图标到你定义的项目中，运用也很简单。

选择图标

打开阿里巴巴矢量图标库首页，选择你心怡的库，这里可以随便选择，可以组合的，如下图：

选择具体图标，添加入库

右上方，点击库查看已经入库的图标，并添加至项目。也可以直接下载，点击下载素材，选择颜色，格式(SVG、AI、PNG)，完成下载。

添加至项目后，可以在图标管理=>我的项目中查看已经添加的图标

运用到项目

unicode引用

unicode是字体在网页端最原始的应用方式，特点是：

1. 兼容性最好，支持ie6+，及所有现代浏览器。

2. 支持按字体的方式去动态调整图标大小，颜色等等。

3. 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

unicode使用步骤如下：

1. 拷贝项目下面生成的font-face(copy自己项目下的，不是下方的代码，到你本地项目的样式文件里面)

定义使用iconfont的样式(你本地项目的样式文件里面添加)

挑选相应图标并获取字体编码，应用于页面

font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

1. 兼容性良好，支持ie8+，及所有现代浏览器。

2. 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。

3. 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。

4. 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

font-class使用步骤如下：

1. 拷贝项目下面生成的fontclass代码(引用你阿里图标库项目->font-class路径到本地html的head中)

挑选相应图标并获取类名，应用于页面(这里的icon-xxx就是具体的图片类名，去看阿里图标库项目->font-class)

symbol引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：

1. 支持多色图标了，不再受单色限制。

2. 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。

3. 兼容性较差，支持 ie9+,及现代浏览器。

4. 浏览器渲染svg的性能一般，还不如png。

使用步骤如下：

1. 拷贝项目下面生成的symbol代码(引用你阿里图标库项目->symbol路径到本地html的head中)

加入通用css代码(引入一次就行)

挑选相应图标并获取类名，应用于页面

公告

以后每月5、15、25号更新原创文章，内容不限，喜欢小编的可以点击关注，也可在下方评论留言，你喜欢什么内容，小编根据大家喜欢的内容尝试更新

java怎么引入矢量图标库,阿里巴巴矢量图标库Iconfont的使用方法相关推荐

css技术点二：字体图标（阿里巴巴字体图标使用）
css技术点二:字体图标(阿里巴巴字体图标使用) 一.什么是字体图标二.字体图标的好处三.字体图标用法四.字体图标格式介绍一.什么是字体图标字体图标可以为前端工程师提供一种方便高效的图标使用 ...
微信小程序引入外部矢量图标（阿里巴巴矢量图标）
1.显示效果 2.实现步骤进入阿里巴巴矢量图标库搜索想要的矢量图标并加入购物车,点击右上角购物车将图标添加至项目更改项目设置将字体格式设置为TTF Base64 点击下载至本地在微信小程序 ...
微信小程序引入外部icon（阿里巴巴矢量图标）
1.实现效果 2.实现步骤阿里巴巴矢量图标库搜索想要的图标,添加购物车. 添加进自己的项目中获取代码(注意:当项目更新之后,该代码也需更新) 3.实现代码新建一个iconFont.wxss,复 ...
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
微信小程序怎么引入iconfont字体图标由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
vue-cli引入iconfont图标（阿里巴巴矢量图标库）
官网:iconfont-阿里巴巴矢量图标库 1.上官网搜索需要的图标,依次"添加入库" 2.点开右上角购物车,将所有图标"添加至项目"(已有项目/新建项目) 3 ...
各种icon图标（阿里巴巴矢量图）
http://www.iconfont.cn/plus/home/index?spm=a313x.7781069.1998910419.2.RGM5pd
CSS:运用阿里巴巴矢量库快速在对应位置加上好看的图标
进入阿里巴巴矢量图标库阿里巴巴矢量图标库选择喜欢的图标的,点击添加到库选择完之后,点击右上角的购物车图标(前提是已经登录,推荐使用GitHub登录) 然后在右侧中点击添加至项目之后在个人主页中 ...
QT使用阿里巴巴矢量图标库设置窗口图标、菜单栏项图标、工具栏项图标、状态栏图标以及将控件设置为图标
在阿里巴巴矢量图标库官网上下载图标,具体操作在下方有讲解. 在QT项目中设置图标示例. 我总结了一下需要设置图标的地方大致分为5个,如下: 1. 设置窗口图标(利用setWindowIcon()属性实 ...
Element引入Iconfont（阿里巴巴矢量图标库）第三方图标库
最近在使用vue-element-admin开源项目进行系统开发,但是在引入第三方图标库的时候,出现了一些问题,百度找了找,也没有找到自己想要的答案,最后经过多次尝试,将问题解决.所以特此记录一下,以 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...

java怎么引入矢量图标库,阿里巴巴矢量图标库Iconfont的使用方法

java怎么引入矢量图标库,阿里巴巴矢量图标库Iconfont的使用方法相关推荐

最新文章

热门文章