ant引入html页面,antdesign 中使用 iconfont symbol方式引入图标不展示

最近在写项目遇到了一个问题，我使用vue框架搭建了一个项目。

我创建了一个 index.js文件，内容为：

import { Icon } from 'ant-design-vue';

const IconFont = Icon.createFromIconfontCN({

scriptUrl: '//at.alicdn.com/t/font_2296540_wpxzi5ar76.js',

});

export default IconFont;

然后在main.js中引入了该组件，

但是当我在页面中使用这个标签的时候，却发现无论如何小图标都出不来，

标红的位置是我放图标的位置，

找了各种资料都不知道问题处在了哪里，有明白的大神可以和我交流一下吗？非常感谢

回答

我引了你的js,只有如下几个svg

你能使用的图标便只有这个,type值为它们的id,不需要添加icon-

您好，首先我要对您表示感谢，我使用您说的方法问题解决了，但我还是想冒昧的问一句，antd官网上引用是使用 icon-的，为啥我们使用的时候写上icon-就不可呢？

import { Icon } from 'ant-design-vue';

const IconFont = Icon.createFromIconfontCN({

scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',

});

export default {

components: {

IconFont,

};

以上为官网的例子

你的图标是iconfont.cn的吧,建立项目的时候,可以选择前缀.antd加了前缀icon-,你没有.

您可以看看我下面贴的图片

ant引入html页面,antdesign 中使用 iconfont symbol方式引入图标不展示相关推荐

web页面设计中使用阿里字体（包含图标）
由于浏览器的兼容问题,很多文本样式在不同浏览器中可能显示不出期待的效果:阿里字体解决了绝大部分浏览器的兼容问题,在各大浏览器都兼容一.登录阿里字体官网 iconfont-阿里巴巴矢量图标库在搜索栏 ...
在html和vue中使用iconfont的symble色彩图标
在html以及vue中使用iconfont的symbol图标写给新手看的首先注册iconfont,并创建一个项目,在图标库把选择的图标加入项目可以选择使用在线链接,这里推荐下载到本地要注意使用 ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
项目中引用Iconfont（阿里巴巴矢量图标）的方式
Iconfont的官网:https://www.iconfont.cn/ 首先没有账号的需要先注册账号,可以用微博扫码或者GitHub账户登录. 登录成功后搜索框搜索到你需要的图标悬停在搜索结果中的 ...
iconfont的symbol方式引入项目不显示
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法拷贝项目生成的symbol代码加入通用css代码(引入一次就行) <style type="text/css& ...
vue中使用iconfont(Symbol引用)
文章目录一.准备步骤 1.首先打开iconfont图标库 2.将图标加入购物车 3.将图标添加到项目 4下载到/set/assets/中 5.配置main,js 6.引用 <template& ...
iconfont symbol引入使用有彩色，通过class引入没有彩色
通过class引入使用第一步第二步第三步第四步第五步是下面的压缩包挤压出来,然后把文件夹放到我们的项目,然后在main.ts引入 iconfont.css即可使用然后就可以在页面中看到我 ...
iconfont怎么引入html,Web页面中引用iconfont图标
阿里妈妈出品的 iconfont 是一个矢量图标管理.交流平台,支持矢量图.位图等格式下载,并提供便捷的前端项目植入引用方法,是当前Web开发中主流的icon解决方案. 想要在前端页面中引入图标,一个 ...
整理在小程序页面样式中引入阿里巴巴字体图标
整理在小程序页面样式中引入阿里巴巴字体库 1.登录阿里巴巴字体图标 2.在小程序项目中配置 1.登录阿里巴巴字体图标点我阿里巴巴字体图标库搜索需要的字体图标将需要的字体图标点击添加到购车中添加 ...

ant引入html页面,antdesign 中使用 iconfont symbol方式引入图标不展示

ant引入html页面,antdesign 中使用 iconfont symbol方式引入图标不展示相关推荐

最新文章

热门文章

ant引入html页面,antdesign 中 使用 iconfont symbol方式引入图标不展示

ant引入html页面,antdesign 中 使用 iconfont symbol方式引入图标不展示相关推荐

最新文章

热门文章

ant引入html页面,antdesign 中使用 iconfont symbol方式引入图标不展示

ant引入html页面,antdesign 中使用 iconfont symbol方式引入图标不展示相关推荐