阿里字体图标库的使用

大家好，欢迎来到IT知识分享网。

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: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）

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

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

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

四 使用unicode

点击添加至项目并下载

下载完成后解压，只保留这四个文件，并放入font文件夹

全局引入iconfont.css文件，就可以使用了，

 <span class="a"></span> .a:before { 
    content: '\100d9'; font-size: 36px; color: red; font-family: 'iconfont'; } 

 <span class="iconfont a"></span> .a:before { 
    content: '\100d9'; font-size: 36px; color: red; }