Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Vuetify awesome集成问题

Vuetify awesome集成问题
EN

Stack Overflow用户
提问于 2020-08-12 04:54:57
回答 1查看 144关注 0票数 2

我正在尝试让组件从vuetify工作。我正在使用有趣的svg图标,并且我遵循了文档中关于安装页面的说明。下面是我如何注册它的:

代码语言:javascript
运行
AI代码解释
复制
import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas, faBell } from "@fortawesome/free-solid-svg-icons";

Vue.component("font-awesome-icon", FontAwesomeIcon); // Register component globally
library.add(fas, faBell); // Include needed icons

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: "faSvg",
  },
});

但是,当我使用这样的代码时:

代码语言:javascript
运行
AI代码解释
复制
 <v-icon>fas fa-bell</v-icon>

对于显示图标,它不起作用。我通过使用font- would icon组件让它工作,但我想使用原生的vuetify v-icon组件。

你们知道问题出在哪里吗?

谢谢。

EN

回答 1

Stack Overflow用户

发布于 2021-11-25 08:50:47

看起来你的<head>中缺少这个链接。如果你阅读Vuetify docs,你会看到:

开始使用FontAwesome最简单的方法就是使用

。在主index.html的头部放置以下代码片段:<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">

即使它没有为SVG版本指定相同的链接,我也只是通过将该链接添加到我的<head>中才能使其工作。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63370000

复制
相关文章
解决 vuetify 中 icon 显示错乱问题
Vuetify 使用 Google's Roboto fon 和 Material Design Icons。安装这些软件的最简单方式是将他们的 CDN 包含在你的主 index.html 中。
4O4
2022/04/25
1.4K0
vue-awesome-swiper 相关问题
Swiper常用于移动端网站的内容触摸滑动,它是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,以及PC端网站。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
生南星
2020/04/27
1.3K0
编写 vuetify 全局 snackbar
components/snackbar.vue <template> <v-snackbar v-model="open" :bottom="bottom" :color="color" :timeout="2000">{{ msg }}</v-snackbar> </template> <script lang='ts'> import { Component, Vue } from "vue-property-decorator"; @Component export default cla
4O4
2022/04/25
1K0
VUE-Vuetify框架
Vue虽然会帮我们进行视图的渲染,但样式还是由我们自己来完成。这显然不是我们的强项,因此后端开发人员一般都喜欢使用一些现成的UI组件,拿来即用,常见的例如:
cwl_java
2020/02/11
4.3K0
Awesome 项目
Platforms 名称 地址 Node.js https://github.com/sindresorhus/awesome-nodejs Frontend Development https://github.com/dypsilon/frontend-dev-bookmarks iOS https://github.com/vsouza/awesome-ios Android https://github.com/JStumpp/awesome-android IoT & Hybrid Apps ht
双鬼带单
2018/08/01
2K0
vue vuetify 实现智能联想
使用 Vuetify 中的 v-menu 组件实现,控制光标焦点,在输入框获取的焦点时弹出联想词汇菜单,支持上下按键选中内容,菜单位置,样式按需调整即可
kirin
2020/11/03
8820
分享八个免费的Vue图标库,轻松修饰你的应用
图标,是能够吸引访问者注意力并提供更好的感官的好方法。随着Vue的兴起,更多的Vue库正在兴起,以下就为大家推荐几个Vue的图标库。
学前端
2020/04/07
8.1K0
vuetify-使用详细入门教程
写在前面的话,公司工作很久了,一直都没有改过自己的技术栈,才觉得慢慢的落后于潮流,也知道自己的技术栈很老旧,想过要重构项目,但是项目周期时间一直不许,学习vue只能在下班的时间里面,这两年也断断续续的用过一些框架,但最后还是选中了vuetify。
王小婷
2020/05/26
7K0
vuetify-使用详细入门教程
awesome-php
收集整理一些常用的PHP类库, 资源以及技巧. 以便在工作中迅速的查找所需… 这个列表中的内容有来自 awesome-php 的翻译, 有来自开发者周刊以及个人的积累等. 一个前端组件的列表 awesome-frontend 推荐 学习资源 PHP相关的有参考价值的社区,博客,网站,文章,书籍,视频等资源 PHP网站(PHP Websites) PHP The Right Way - 一个PHP实践的快速参考指导 PHP Best Practices - 一个PHP最佳实践    - Clea
guanguans
2018/05/09
8.7K0
17 Most popular Vue.js plugins
Vue 被一个健康的插件和包的生态系统所加强,使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择的框架,所以有一个不断增长的插件和包库,你可以在项目中使用。
唐志远
2022/10/27
6.1K0
17 Most popular Vue.js plugins
awesome-java-cn
Java 资源列表,内容包括:构建工具、数据库、框架、模板、安全、代码分析、日志、第三方库、书籍、Java 站点等等。 古董级工具 这些工具伴随着Java一起出现,在各自辉煌之后还在一直使用。 Apache Ant:基于XML的构建管理工具。官网 cglib:字节码生成库。官网 GlassFish:应用服务器,由Oracle赞助支持的Java EE参考实现。官网 Hudson:持续集成服务器,目前仍在活跃开发。官网 JavaServer Faces:Mojarra是JSF标准的一个开源实现,由Oracle开
guanguans
2018/05/09
4.1K0
Awesome Asyncio 《碉堡的Asyncio·中文版》Awesome-Asyncio-CN
Awesome-asyncio 是 Timo Furrer 发起并维护的 Python Asyncio 资源列表。本项目是其中文版,在这里,收集了大量的 Asyncio 的最棒、最新的资源,供大家探索 Python 异步编程世界。
SeanCheney
2018/08/16
2.6K0
Awesome-Shell资源
█████╗ ██╗ ██╗███████╗███████╗ ██████╗ ███╗ ███╗███████╗ ██╔══██╗██║ ██║██╔════╝██╔════╝██╔═══██╗████╗ ████║██╔════╝ ███████║██║ █╗ ██║█████╗ ███████╗██║ ██║██╔████╔██║█████╗ ██╔══██║██║███╗██║██╔══╝ ╚════██║██║ ██║██║╚██╔╝██║██╔══╝ ██║ ██║╚███╔███╔╝███████╗███████║╚██████╔╝██║ ╚═╝ ██║███████╗ ╚═╝ ╚═╝ ╚══╝╚══╝ ╚══════╝╚══════╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝ ███████╗██╗ ██╗███████╗██╗ ██╗ ██╔════╝██║ ██║██╔════╝██║ ██║ ███████╗███████║█████╗ ██║ ██║ ╚════██║██╔══██║██╔══╝ ██║ ██║ ███████║██║ ██║███████╗███████╗███████╗ ╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝╚══════╝
若与
2019/04/18
2K0
Awesome-Shell资源
【Hooks】:[组]Awesome React Hooks
We know that components and top-down data flow help us organize a large UI into small, independent, reusable pieces.However, we often can’t break complex components down any further because the logic is stateful and can’t be extracted to a function or another component. Sometimes that’s what people mean when they say React doesn’t let them “separate concerns.”
WEBJ2EE
2021/02/26
7100
【Hooks】:[组]Awesome React Hooks
Font Awesome Symbols for Sketch
源自大名鼎鼎的twitter bootstrap的Font Awesome图标字体库有了sketch的版本,而且将其制成了Symbols,更加方便使用:)
小刀c
2022/08/16
9500
Font Awesome Symbols for Sketch
awesome-javascript-cn
JS 资源列表,内容包括:包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎、数据可视化、时间轴、编辑器等等。 包管理器 管理着 JavaScript 库,并提供读取和打包它们的工具。 npm:npm 是 JavaScript 的包管理器。官网 Bower:一个 web 应用的包管理器。官网 component:能构建更好 web 应用的客户端包管理器。官网 spm:全新的静态包管理器。官网 jam:一个专注于浏览器端和兼容 RequireJS 的包管理器。官网 jspm:流畅的浏览器包管理
guanguans
2018/05/09
10.7K0
最全深度学习资源集合(Github:Awesome Deep Learning)Awesome Deep Learning
偶然在github上看到Awesome Deep Learning项目,故分享一下。其中涉及深度学习的免费在线书籍、课程、视频及讲义、论文、教程、网站、数据集、框架和其他资源,包罗万象,非常值得学习。
古柳_DesertsX
2018/08/21
1.5K0
最全深度学习资源集合(Github:Awesome Deep Learning)Awesome Deep Learning
在项目中使用 vue-awesome-swiper 遇到的问题
最近做的商城项目需要在首页展示一个轮播图,秉承着“有现成轮子就绝不自己写”(其实是懒和菜)的想法,在网上搜索了一下,最后选择使用 vue-awesome-swiper。安装和使用就不说了,可以直接看 GitHub 的文档。按照文档写完基础结构后,实际使用的时候遇到了几个问题:
Chor
2020/03/09
1.7K0
awesome-sysadmin-cn资源
系统管理员 资源列表,内容包括:备份/克隆软件、云计算/云存储、协作软件、配置管理、日志管理、监控、项目管理 备份 备份软件 Amanda:客户端-服务器模型备份工具。官网 Bacula:另一个客户端-服务器模型备份工具。官网 Backupninja:轻量级,可扩展的元数据备份系统。官网 Backuppc:客户端-服务器模型备份工具和文件共享方案。官网 Burp:网络备份和还原程序。官网 Duplicity:使用rsync算法加密的带宽-效率备份。官网 Lsyncd:监控一个本地目录树的变化,然后产生一个进
guanguans
2018/05/09
2.5K0
awesome-mysql-cn资源
MySQL 资源列表,内容包括:分析工具、备份、性能测试、配置、部署、GUI 等。 分析工具 性能,结构和数据分析工具 Anemometer - 一个 SQL 慢查询监控器。 innodb-ruby - 一个对 InooDB 格式文件的解析器,用于 Ruby 语言。 innotop - 一个具备多种特性和可扩展性的 MySQL 版 ‘top’ 工具。 pstop - 一个针对 MySQL 的类 top 程序,用于收集,汇总以及展示来自 performance_schema 的信息。 mysql-statsd
guanguans
2018/05/09
1.8K0

相似问题

如何集成sailsjs和vuetify?

12

将字体Awesome (zip分布)与角集成

110

如何在Vuetify和Nuxt.js中使用Font-Awesome

20

在Laravel 5.6中集成Font Awesome

10

Vuetify部件进口问题

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文