使用阿里矢量多色图标为网站添加彩色图标的方法

教程分享21,188字数 856阅读模式

Iconfont 是一个开源的矢量图标管理平台,有单色图标和多色图标之分。之前分享过一篇 使用 iconfont 阿里矢量图标为网站添加图标的方法 的文章,详细说明了阿里矢量图标单色图标的使用方法,今天为大家分享一下阿里矢量图标多色图标的使用方法。

使用阿里矢量多色图标为网站添加彩色图标的方法-图片1

挑选图标并下载

登录 阿里矢量图标 官网,挑选彩色图标并下载。

1.登录帐号

官网地址:https://www.iconfont.cn

目前只支持 gitHub 和新浪微博账号授权登录。

2.搜索图标

搜索框输入名称进行搜索,比如 “home”,下方会显示搜索结果。

使用阿里矢量多色图标为网站添加彩色图标的方法-图片2

3.加入购物车

选择多色图标,点击图标上方的购物车,可将该图标加入到购物车中。

使用阿里矢量多色图标为网站添加彩色图标的方法-图片3

4.移至项目

点击右上角购物车,然后选择项目,没有项目的话可以新添加一个,比如 “彩色图标”,然后点击下方的 “确定” 按钮。

使用阿里矢量多色图标为网站添加彩色图标的方法-图片4

5.下载

选择“下载到本地”。

使用阿里矢量多色图标为网站添加彩色图标的方法-图片5

其中,图标名称下方的 icon-xxx 为图标类名,在下面内容会用到。

引用方式

将下载生成的压缩包上传到网站指定目录下,比如根目录下,然后解压。

1.引入 JS 代码

引入项目下面生成的 JS 代码

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

2.加入 CSS 代码

加入通用 CSS 代码,这一步为非必需,可以调整图标大小

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

3.应用图标

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

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

效果预览

以上,我们添加了一个图标,预览效果如下。

使用阿里矢量多色图标为网站添加彩色图标的方法-图片6

结束语

网页字体图标因其体积小,图标样式丰富而深受广大站长的喜爱。iconfont 的使用方法非简单,如果我们想新添加一个图标,只需要将图标添加到项目中,然后下载压缩包并上传到网站指定目录解压即可。如果大家有任何意见或建议,欢迎在下方评论处留言。

本文已通过「原本」原创作品认证,转载请注明文章出处及链接。

夏日阳光
  • 本文由 夏日阳光 发表于 2022年11月10日
  • 本文为夏日阳光原创文章,转载请务必保留本文链接:https://www.pieruo.com/228.html
评论  2  访客  1  作者  1
    • maqingxi
      maqingxi 2

      我怎么觉得黑白的图标更协调呢?

        • 夏日阳光
          夏日阳光

          @ maqingxi 哈哈哈哈,也许吧,彩色的图个新鲜感。

      匿名

      发表评论

      匿名网友
      :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
      确定

      拖动滑块以完成验证