阿里巴巴矢量图标库 iconfont 的使用方法

做设计的应该会知道“阿里巴巴矢量图标库”这个网站,你可以上传自己设计的图标,也可以下载别人分享的图标。

作为前端,我们也可以更好的利用它,实现网站图标的美化。

首先找到你需要的图标并加入库:三个按钮分别是 加入库、加入收藏和下载

阿里巴巴矢量图标库 iconfont 的使用方法 HTML笔记 第1张

点击下载按钮后会弹出一个窗口,你可以调整任意颜色和尺寸,可以下载 SVG、AI和PNG3种格式。

阿里巴巴矢量图标库 iconfont 的使用方法 HTML笔记 第2张

点击右上角图标,打开库,点击“下载代码”下载字体包,你也可以先添加至项目,然后在“资源管理”——“我的项目”里面,点击“下载到本地”进行下载。

阿里巴巴矢量图标库 iconfont 的使用方法 HTML笔记 第3张

点击“添加至项目”,你可以添加项目名称,点击“确定”保存到我的项目。

阿里巴巴矢量图标库 iconfont 的使用方法 HTML笔记 第4张

在我的项目中,你可以生成在线链接,这里给出3种方式:Unicode、Font class 和 Symbol。

阿里巴巴矢量图标库 iconfont 的使用方法 HTML笔记 第5张

点击“下载至本地”会下载一个包,解压后就可以引入使用了。

阿里巴巴矢量图标库 iconfont 的使用方法 HTML笔记 第6张

浏览器打开“demo_xxx.html”可以看到图标的使用方法,有三种引用方式:

阿里巴巴矢量图标库 iconfont 的使用方法 HTML笔记 第7张

font-class引用:

首先在头部引入 iconfont.css 文件

<link rel="stylesheet" type="text/css" href="./iconfont.css">

然后在 html 代码中使用相应的类名应用于页面

<i class="iconfont icon-xxx"></i>

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

unicode引用:

首先拷贝项目生成的 font-face

@font-face {
  font-family: 'iconfont';
  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#iconfont') format('svg');
}

定义使用 iconfont 的样式

.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>

IconFont 图标

首先引入项目下面生成的symbol代码

<script src="./iconfont.js"></script>

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

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

然后挑选相应图标并获取类名,应用于页面

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

使用的时候只需要保留一种方式所需要的文件和字体文件,其他的删掉就可以了。

怎么样?是不是很方便呢?

未经允许不得转载:前端资源网 - w3h5 » 阿里巴巴矢量图标库 iconfont 的使用方法

赞 (3)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)