解决iconfont图标symbol引用方式，图标不显示及不能变色的问题

您所在的位置：网站首页 › 苹果手机图标色彩怎么设置出来不一样的颜色 › 解决iconfont图标symbol引用方式，图标不显示及不能变色的问题

解决iconfont图标symbol引用方式，图标不显示及不能变色的问题

2024-07-12 07:20| 来源: 网络整理| 查看: 265

symbol引用方式的操作步骤导语iconfont.cn创建图标图标symbol引用

导语

近期开发物流项目，图标以symbol的引入方式，图标创建后，无法改变颜色，查看了一下dom解析后为svg的，试着通过改变svg的fill属性改变颜色，但不起作用，试着改变图标的颜色，究其原因为,结果发现.js文件中都加了fill，并且在项目图标库中根本无法辨认图标又试着图标批量去色，结果发现成功了，这是根本，只有在图标去色后才能改色。

iconfont.cn创建图标

1.注册网站的账号 2.创建项目默认的选项多色和svg 务选

若选择可能会导致不能变色这种可以

3.选择图标，加入购物车，添加到项目，生成代码。 4. 批量操作=》选择图标=》图标去色一定要去除图标的颜色，这是重点，否则无法变色

图标symbol引用

1.Font class 引入css

// 引入css

2.Symbol，在main.js中引入js

// 引入icon import Antd, { message, Icon } from 'ant-design-vue'; // 创建icon图标 const IconFont = Icon.createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/c/font_4137749_180leweo1kf.js', }); // 挂载实例 Vue.component('IconFont', IconFont); Vue.use(Antd);

3.使用图标方法一：i标签引入改color

// iconpyqianbao 为图标的类型 // wallet-icon 为图标的样式 // wallet-icon 为图标的样式 .wallet-icon { font-size: 24px; // 控制大小 color: #f9a62b; // 设置颜色 vertical-align: sub; // 对齐 }

方法二：iconfont方式改fill

// iconfont方式 // type为图标的名，对应iconfont.cn的图标名 // style是设置图标的样式 {{ menuInfo[fieldNames.label] }} // 样式 .icons-list .anticon { // margin-right: 8px; // font-size: 17px; vertical-align: middle; /deep/ svg{ fill: white !important; } }

【本文地址】

解决iconfont图标symbol引用方式，图标不显示及不能变色的问题

解决iconfont图标symbol引用方式，图标不显示及不能变色的问题

今日新闻

推荐新闻