阿里巴巴iconfont正确的使用方式是怎样的？

Posted 2023-05-03

对设计师来说这是一个免费矢量图库网站，90%以上的网页设计师都在这个网站寻找相关的免费图标，而且非常好用，有了这个图库设计师可以很高效地设计出高端大气的网页，不少新入行的设计师对于寻找合适的网页图标素材抠破脑袋，现在有这款矢量图标库，显得高效有便捷。作为设计师的我认为这个网站正确的使用方式主要有以下几点。

一、用某博号注册。

当新手第一次登陆时，网站会提示你注册，你只需要按照网站的要求注册就可以了，这里对于国内设计师来说用某博号注册是非常便捷的事情，具体注册方式根据网站提示操作就行，非常简单。

二、图标收藏暂存。

当我们注册好该网站账号之后，我们可以根据自己的需求，寻找合适的图标素材，可以在图标搜索栏输入行业关键词，或你需要寻找的图标属性关键词，这样可以很快搜索到你需要的图标，最主要这个平台的图标都是免费使用，无需付费，是一款不错矢量图标网站。这个矢量图标网站，目前上架图标数量超过500万，其中包括一般的图形矢量图标，另外最近的插画矢量图标元素也越来越丰富。

三、喜欢什么图标自己下载

当我们寻找到合适的图标之后，我们可以暂存在图标收藏中，也可以直接下载，下载下来的文件都是PNG格式，运用于PS文件中非常方便。而且这个网站最大的特色是当你选择下载之前可以随便更改图标的颜色，这对设计师来说非常省事。

综上所述，对于设计师来说，用这个网站的图标来设计网页页面，是非常不错的选择，最重要的是可以白嫖，对于iconfont正确的使用方式，你还有需要补充的吗？欢迎评论交流。

参考技术A 1.首先在Iconfont-阿里巴巴矢量图标库上把你需要的图标加入“暂存架” 2.选择完所有要用的图标后“存储为项目”，并给它命名。并在“图标管理”-“图标应用项目”找到这个项目，获取到在线链接，把里面的代码复制到CSS中。 参考技术B 1、首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”；2、选择完所有要用的图标后“存储为项目”，给它命名。3、在html中需要使用到图标时，使用iconfont类名。在标签里面写上你想用的图表下面的Unicode；4，通过控制iconfont类的属性改变图标的样式；5、这些图标也可以下载到本地使用。

iconfont 使用

阿里巴巴适量图库  http://www.iconfont.cn/

官方帮助中有非常详细的操作指导  

http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code

 

 

PS:

1.在线使用时src>url中需要添加http:

2.三种方式对比：

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

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

• font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
• symbol这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法，实质是svg集合，支持多色图标了，不再受单色限制。