最近在寫項目遇到了一個問題，我使用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方式引入图标不展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。