icon-font如何引入图标

原创于 2024-11-05 17:51:07 发布 · 677 阅读

CC 4.0 BY-SA版权

文章标签：

symbol引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

阿里巴巴矢量图标库

找到想要的图标之后，点击购物车按钮，可以将选中的素材添加到购物车中然后点击顶部的购物车，打开侧边栏，点击添加至项目，输入项目名后确定

然后在我的项目中，找到对应项目名的项目，点击下载至本地

下载至本地之后是一个压缩包，解压至本地

把 iconfont.css、 iconfont.ttf、iconfont.woff、iconfont.woff2 文件引入到项目中

在vue脚手架项目的main.js如果是ts就引入main.ts中引入iconfont.css文件

import "./fonts/iconfont.css";

然后在html的元素中，使用 iconfont icon-xxx 就可以引入对应的图标

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

<span class="iconfont icon-yonghu"></span>

但是这里有一个问题，就是引入的图标是黑色的，原来的图标明明是蓝色，如果让引入到项目中的iconfont图标保留它原有的颜色呢？

需要在main.js中额外引入iconfont.js文件（js文件也在下载到本地的压缩包里）

加入通用 CSS 代码（引入一次就行）：

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

挑选相应图标并获取类名，应用于页面这个是在html中引入：

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

App.vue加上：

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

　　3、使用方式略微不同

<svg class="icon myIconStyle" aria-hidden="true">
　　<use :xlink:href="'#' + dbIcon[item.type]"></use>
</svg>

.myIconStyle{
　　width 40px
　　height 40px
}

　　myIconStyle是自定义的样式

　　补充：aria-hidden 的意思

　　图标的可访问性

　　现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。

　　如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。

　　如果你所创建的组件不包含任何文本内容（例如， <button> 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属相。