西西软件网:最安全的绿色手机软件下载站!
游戏
您当前所在位置:首页 > 软件教程 > 百科资讯

阿里巴巴矢量图标库_阿里巴巴矢量图标库

时间:2026-03-11 02:00 来源:西西软件网 作者:佚名
阿里巴巴矢量图标库是国内功能很强大且图标内容丰富的矢量图标库,通过了解其基础功能以及相关的使用说明功能够更好地为用户解决设制作字体图标困难等问题。

一、简介

阿里巴巴矢量图标库是由阿里巴巴体验团队倾力打造的中国第一个最大且功能最全的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能,是设计师和前端开发的便捷工具。

二、基础功能

图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。

三、关于使用

下载图标

1.首先搜索阿里巴巴矢量图标库,进入网址;

2.在右上角的搜索,搜索自己要的图标,或者选择去图标库自行选择想要的图标

3.选择图标,点击图标变成橘色,即放在暂存架

4.再次点击即可取消,或者在暂存架中鼠标滑过图标,图标右上角有删除小按钮也可删除选中;

5.选择好要用的图标后,点击暂存架的下载至本地,解压待用;

项目引用

1. 打开解压的文件夹中的demo.html

官网

2.可以看到已下载的图标可看到了吧,按照demo的步骤,下面我们配置ionic的项目

3. 静态文件存放目录,新建font文件夹用来存放字体文件(可自定义存放)

4.css使用font-face声明字体

@font-face {font-family: 'iconfontyyy';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfontyyy') format('svg');
}

5.css定义使用iconfont的样式

.iconfontyyy{
font-family:"iconfontyyy" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}

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

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

Tab及其他标签引用图标

1.打开直接解压的图标文件中的iconfont.css文件

2.将.icon-XXX:before{content:'XXXX'}也复制到你的css文件中
例:

}
.icon-nvbao:before{ content:"\f009c";}
.icon-jiezhi:before{ content:"\f00a3";}
.icon-gaogenxie:before{ content:"\f009a";}

3.只要在class中加 iconfont icon-XXX就可以使用图标

例:<i class="iconfont icon-gaogenxie"></i>

网址均为系统搜集,非人工收集,网址可能存在访问风险或法律风险,请自行甄别,参考资料秀友百科吴清
上面是阿里巴巴矢量图标库 的内容了,文章的版权归原作者所有,如有侵犯您的权利或违规,请及时联系本站删除,更多相关阿里巴巴矢量图标库的资讯,请关注收藏西西软件网。
上一篇:lianjia_链家网 下一篇:返回列表

玩家评论

精品推荐