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)

在项目根目录下找到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文件夹
在这里插入图片描述
全局引入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;
  }

Logo

前往低代码交流专区

更多推荐