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中引入了该组件,

f92d507bf5ac8e45596b734aac5fa9b0.png

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

bede20541da5eeb655ba8182da8fb608.png

ef9fc59c02f4bf2b2ba9e67ff517b325.png

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

7e6e5ade96808c527b1cac06d0953fa2.png

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

回答

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

cf07dddf31b225b279709a911d63747c.png

你能使用的图标便只有这个,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-,你没有.

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

810c277dd59fdd5af71003d6f6777b2a.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/264293.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java filter

一、Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 html 文件等进行拦截,从而实现一些特殊的功…

visualstudio调试html,Visual Studio Code中调试JavaScript

一、安装Debugger for Chrome扩展插件二、配置运行环境最左侧菜单找到调试(一个虫子样图标),点击下图中红色标注或者直接按F5:然后出现下图所示:选择Chrome,会生成Launch.json文件:{// 使用 IntelliSense 了解相关属性…

动态网页技术(二)

SSH整合的基本步骤1、 Spring向下整合Hibernate(DAO层)1.1使用Spring的IoC容器创建sessionFactory1.2使用Spring的IoC容器创建DAO2、 Spring中间管理业务层2.1使用Spring的IoC容器创建Biz Bean2.2使用Spring的AOP配置业务层事务3、 Spring向上整合Str…

Android之PhotoView使用(原创)

文章大纲 一、什么是PhotoView二、代码实战三、项目源码下载 一、什么是PhotoView 一款 ImageView 展示框架,支持缩放,响应手势,位于图片排行榜的第五位,PhotoView 与上面不同的是图片的展示功能,可以实现类似微信头像…

浏览器打不开html链接,win7系统ie浏览器打不开网站链接怎么办

‍‍有些使用ie浏览器的win7旗舰版用户来,最近发现网站中的链接打不开,严重影响上网体验,遇到这种情况我们该怎么办呢?会出现网站链接无法打开很有可能是ie浏览器出了问题,我们可以通过修复IE组件来解决,下…

好玩的代码(1)

看效果&#xff08;gif工具不太会用&#xff0c;效果不是很好&#xff09; 代码很简单&#xff0c;就是对sleep函数和/b的使用。 代码 1 #include <cstdio>2 #include <windows.h>3 using namespace std;4 5 int main(int argc, char **argv)6 {7 printf("…

Python基础实践-密码管理系统实例

密码管理系统实例 需求分析&#xff1a; 1.主界面&#xff08;选项&#xff1a;密码生成&#xff0c;密码查询&#xff0c;密码修改&#xff0c;密码删除&#xff09;2.密码生成&#xff1a;用户输入密码的描述&#xff0c;输入密码的长度&#xff0c;使用随机数生成一个比较复…

html循环加载多个图片,两行代码实现图片碎片化加载

今天来实现一个图片碎片化加载效果&#xff0c;效果如下&#xff1a;我们分为 3 个步骤来实现&#xff1a;定义 html 结构拆分图片编写动画函数定义 html 结构这里只需要一个 canvas 元素就可以了。id"myCanvas"width"900"height"600"style"…

从今开始,好好学习一下算法!

ACM 进阶之路&#xff08;转&#xff09;2007年12月30日 星期日 18:20一般要做到50行以内的程序不用调试、100行以内的二分钟内调试成功.ACM主要是考算法的,主要时间是花在思考算法上&#xff0c;不是花在写程序与debug上。 下面给个计划你练练&#xff1a; 第一阶段&#xff1…

Redis(1) 简介以及linux环境下的安装

一、简介 Redis是个啥&#xff1f;它是一个key-value型的数据库&#xff0c;它是一个内存性的数据库&#xff0c;数据大量放在内存中&#xff0c;所以速度非常快&#xff0c;快到可以用来当缓存。当然它也有持久化的功能&#xff0c;可以把数据以文件的形式存在硬盘上&#xff…

谈*静态页*(或网页*静态化*)的时候,请区分一些概念(转)

http://www.cnblogs.com/JeffreyZhao/archive/2009/07/05/talk-about-page-statilization.html “静态页”&#xff0c;在Web应用程序开发中是很常见的概念。只是我发现目前还是有相当部分的朋友&#xff0c;在这方面的存在一定的误区。因此现在独立写一篇文章&#xff0c;也想…

html form src,form.html

Amaze UI Admin index Examples欢迎你, Amaze UI 43小时前夕风色Amaze UI 的诞生&#xff0c;依托于 GitHub 及其他技术社区上一些优秀的资源&#xff1b;Amaze UI 的成长&#xff0c;则离不开用户的支持。 2016-09-21 下午 16:405天前禁言小张为了能最准确的传达所描述的问题&…

tiny4412--linux驱动学习(2)

在ubuntu下编写验证字符设备驱动 并移植到arm开发板上 1&#xff0c;准备工作 uname -r 查看电脑版本信息 apt-get install linux-source 安装相应版本的linux内核2&#xff0c;编写驱动程序 Global CharDev.c /* GlobalCharDev.c */ #include <linux/module.h>…

学计算机需要多少内存,电脑内存多大才够用

现在内存的价钱越来越便宜&#xff0c;很多新装机的朋友都已经在使用1GB的内存&#xff0c;而还有很多人也在给老电脑的内存升级。在升级了物理内存之后&#xff0c;如何有效设置虚拟内存才能获得最大限度的性能提升?网上流传的一些优化虚拟内存的方法真的有效吗?下面学习啦小…

TreeView控件二(递归算法)

扩展了一下。每个控件都有其独特的写法和用法&#xff0c;treeview就是这样的一个控件。做个类似资源管理器的页面。如果逐层遍历&#xff0c;代码会不断重复&#xff0c;所以这时需要用递归算法 Codepublic static void TreeBindMethod(TreeView tvFile,string target) …

计算机中桌面中不显示U盘图标,电脑不显示u盘怎么回事 电脑不显示u盘的解决办法...

在平时的工作中&#xff0c;我们会经常使用到U盘来拷贝资料&#xff0c;U盘便于携带并且储存量大&#xff0c;所以很受大家的欢迎。但是平时我们在拷贝资料将U盘插入电脑中&#xff0c;会发现U盘在电脑中不显示&#xff0c;即使在桌面上仔细寻找也无济于事。这种情况小编也有遇…

spring-在配置文件中配置DAO时直接引用DataSource

一、创建spring项目 项目名称&#xff1a;spring101306二、在项目上添加jar包 1.在项目中创建lib目录 /lib 2.在lib目录下添加spring支持 commons-logging.jar junit-4.10.jar log4j.jar mysql-connector-java-5.1.18-bin.jar …

计算机基础知识总结及自学,计算机基础知识的简单总结

我说明一下&#xff0c;本文只是基于作者的个人理解所作出的总结&#xff0c;如果有什么不对的地方&#xff0c;希望大家给我指正&#xff0c;我会尽快更正的。我也想通过51cto这个大平台&#xff0c;能够与大家一同学习&#xff0c;一同交流&#xff0c;一同进步。1.计算机的组…

实验1.1

转载于:https://www.cnblogs.com/P201821430028/p/10689308.html

札记__ADT:URL,Lua:strlen方法

2019独角兽企业重金招聘Python工程师标准>>> 01&#xff0c;Android ADT 在线更新的URL&#xff1a; https://dl-ssl.google.com/android/eclipse/ 02&#xff0c;Lua中字符串长度的判断可以使用 # local str "abcabc" print(#str) --6 print(#"a…