字体标库有哪些?,阿里标

https://www.iconfont.cn/阿里字体图标库网址

选择首页顶部导航栏里面的 资源管理 —》 我的项目

如果还未创建项目，请先创建项目，并添加想要的图标

一.通过symbol引入svg图片（vue项目或者原生框架）

第一步：拷贝项目下面生成的symbol代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

第二步：加入通用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:rel="external nofollow" href="#icon-xxx"></use></svg> 二.通过symbol引入svg图片（react框架)

第一步

import { createFromIconfontCN } from '@ant-design/icons';

第二步，尽量添上https将地址补全

const IconFont = createFromIconfontCN({ scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',});

第三步，icon的样式可以自己视情况进行修改，type对应的值就是字体图标库里面每个图标下面对应的字符串名字

<IconFont className="icon" type="iconFrame19"></IconFont> 三.通过symbol引入svg图片（react框架+ umi）

在项目根目录下找到umircs.ts配置文件
在export default defineConfig（{
}）里面添加 scripts: [
‘https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js’,
],同样记得把地址补全

export default defineConfig({ runtimePublicPath: false, publicPath: baseURL, history: { type: 'hash', }, scripts: [ 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', ]...})

在需要使用图标的地方
icon同样可以自己设置，xlinkHref的值为字体图标对应名称

<svg className="icon" aria-hidden="true"> <use xlinkHref="#icon-xxx"></use></svg>

tips：本人亲测失败，失败的同学用方法二，如果方法三有成功的同学能留言说下吗？嘻嘻

使用unicode和font-class方法的同学，去看阿里字体图标库的官网帮助文档吧
https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code