阿里巴巴矢量图标库（Iconfont）-利于UI和前端的搭配

goji 发布于2019-04-23 11:47 / 941人阅读

摘要：首先我们需要找到这个网站打开之后看到的首页大概是这个样子里面有搜索框，首先先是来找图标设计，里面图标大都是免费的，而且样式多种多样，打个比方我们搜索一个首页的图标。

　　　　前端时间，做一个小网站的时候，需要用到很多小图标，UI设计好之后不知道如何使用，如果使用图片那会很麻烦，相信一些前端更喜欢iconfont这样的标签直接调用，这样包括颜色和大小以及使用都更方便快捷，于是我们经过交流之后决定使用阿里巴巴适量图标库，这是我们第一次使用，也顺便把经验分享给大家，希望可以对一些前端有所帮助。

　　　　首先我们需要找到这个网站https://www.iconfont.cn/ 打开之后看到的首页大概是这个样子：

　　　　里面有搜索框，首先先是UI来找图标设计，里面图标大都是免费的，而且样式多种多样，打个比方我们搜索一个首页的图标。

　　　　在这里我们找到需要的合适的图标，将鼠标放上去的时候会出现三个按钮，就像这样

之后作为UI可以下载直接使用，当然为了团队，也需要收藏，加入项目，这里可以自己新建一个项目，用来存放自己设计时用到的图标，之后再拉前端进入这个项目。

　　　　　接下来就可以看到UI设计时使用的所有图标了

　　　　使用它的方法也非常简单，我们首先需要引入上面的就js，这个js是阿里巴巴专门为你的项目生成的，每一个项目的地址都不一样，而且包括这个项目里图标变动也会影响地址需要更新，所以一旦确定使用之后尽量避免更改，之后我们在复制一段css放到页面上

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
style>

　　　　之后我们就可以正常使用icon了，使用方法可以调用

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx">use>
svg>

　　　　当然不只是这一种方法，个人觉得这种方法更好用，详细说明请参考网站：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

idc机房托管服务器托管 web前端和ui的区别 ui和web前端的区别 ui和前端前端和ui

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1165.html

我的前端规范系列-图标工程化[好用的图标]

摘要：能快速修改和得到想要的图标图标命名规范化后编程人员可以很快配合找到想要的图标。图标设计规范图标要有重心根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。为什么要有图标规范 1.文字和图标能更好的搭配使用图标是具有指代意义的图形，也是一种标识，即文字的一种延展，实际应用中也常与文字一起配合使用,按字体标准规范化设计的图标更容易对齐。2.图标适配变得更简单，图标风...

shengguo 2019-08-02 16:10 评论0 收藏0
我的前端规范系列-图标工程化[好用的图标]

摘要：能快速修改和得到想要的图标图标命名规范化后编程人员可以很快配合找到想要的图标。图标设计规范图标要有重心根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。为什么要有图标规范 1.文字和图标能更好的搭配使用图标是具有指代意义的图形，也是一种标识，即文字的一种延展，实际应用中也常与文字一起配合使用,按字体标准规范化设计的图标更容易对齐。2.图标适配变得更简单，图标风...

KunMinX 2019-08-23 16:43 评论0 收藏0
我的前端规范系列-图标工程化[好用的图标]

摘要：能快速修改和得到想要的图标图标命名规范化后编程人员可以很快配合找到想要的图标。图标设计规范图标要有重心根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。为什么要有图标规范 1.文字和图标能更好的搭配使用图标是具有指代意义的图形，也是一种标识，即文字的一种延展，实际应用中也常与文字一起配合使用,按字体标准规范化设计的图标更容易对齐。2.图标适配变得更简单，图标风...

EastWoodYang 2019-08-05 16:40 评论0 收藏0
Iconfont使用手册

摘要：下载并使用登录，在我的项目中，共有三种形式，这里我一般选择然后点击下载至本地，会得到这样一个文件夹。 Iconfont是阿里巴巴矢量图标库，本文将简单介绍如何快速上手使用Iconfont，自从用上Iconfont后，图片再也不糊了起因之前，项目中的logo等图片资源都是UI小姐姐设计好后切给我，然后我将其引入项目中，如下形式：但这种方式有一个弊端，就是图片放大后，或者在高分辨率...

Yang_River 2019-08-02 12:05 评论0 收藏0
Iconfont使用手册

摘要：下载并使用登录，在我的项目中，共有三种形式，这里我一般选择然后点击下载至本地，会得到这样一个文件夹。 Iconfont是阿里巴巴矢量图标库，本文将简单介绍如何快速上手使用Iconfont，自从用上Iconfont后，图片再也不糊了起因之前，项目中的logo等图片资源都是UI小姐姐设计好后切给我，然后我将其引入项目中，如下形式：但这种方式有一个弊端，就是图片放大后，或者在高分辨率...

hiYoHoo 2019-08-29 17:22 评论0 收藏0