如何在vuetify标签<v-icon></v-icon>中使用圆角图标？
在vuetify中，要在<v-icon></v-icon>标签中使用圆角图标，可以通过使用v-icon组件的属性来实现。具体步骤如下：
- 在使用<v-icon></v-icon>标签时，添加属性
rounded来设置圆角图标。
<v-icon rounded>icon_name</v-icon>- 替换
icon_name为你想要显示的图标名称，例如："mdi-home"。
以下是对上述步骤的解释：
v-icon是vuetify中用于显示图标的组件。rounded是v-icon组件的一个属性，用于设置图标的圆角样式。
使用圆角图标可以在设计中增加一些柔和的感觉，适用于多种场景，例如按钮、工具栏、卡片等等。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
腾讯云云服务器（CVM）是一种高性能、可扩展的云计算服务，可用于构建和托管各种应用程序和网站。它提供了可靠的计算能力、丰富的安全功能、强大的网络性能和灵活的弹性扩展能力。您可以根据需求选择适合您的服务器配置，并根据需要进行调整。
了解更多：腾讯云云服务器（CVM）
相关·内容
1回答
是否可以在不为每个图标编写自定义组件的情况下，用字体()来覆盖Vuetify中的各个图标？vuetify: new Vuetify({ iconfont: 'md', }...Update I某种程度上实现了上述代码的工作，但
浏览 3提问于2021-11-04得票数 1
回答已采纳
我想在vuetify附带的v-icon标签中使用圆形的材料图标。我在stackoverflow上尝试了所有的方法... <v-icon>announcement</v-icon>
浏览 31提问于2020-10-27得票数 1
回答已采纳
5回答
Vuetify图标大小
、、、、
最近，我正在开发一个使用Vuetify的应用程序，并且很难更改Vuetify的默认颜色。/node_modules/vuetify/src/stylus/settings/_colors.styl' primary: #009688&
浏览 4提问于2018-01-05得票数 22
回答已采纳
我知道我可以使用预定义的材料设计(或者字体，很棒，等等)Vuetify中的图标如下所示： <v-icon>mdi-clock</v-icon> 但是有没有办法使用v-icon组件在my-icon.svg文件中显示我定义为svg的自定义图标呢？这个.svg文件位于我的项目public/img目录中，但是如何在v-icon组
浏览 58提问于2020-01-24得票数 1
我是Vue的新手，无法找到正确的答案，如何在v图标和前置图标中使用FA SVG图标。如果我用：图标被显示，但是我如何在v图标和前置图标中使用FASVG图标？from 'v
浏览 0提问于2019-03-17得票数 7
回答已采纳
我正在尝试使用下一个模板在列表中呈现自定义vuetify图标： <v-list nav :key="item.name">>{{$vuetify.icons.values[item.icon]}}</v-icon>
浏览 1提问于2022-02-20得票数 0
回答已采纳
我有一个用vue cli 3创建的vue项目，我使用的是Vuetify v2.0.19。我能够满足所有的要求，并使我的项目显示在phonegap应用程序，但图标不呈现。例如，在我使用<v-icon>info</v-icon>的地方，它会呈现信息，等等。我遵循了Vuetify快速启动，图标和浏览器支持页面和其他几个堆栈溢出线程的答案，但无法得到我的图标来渲染。
我基本上需要包含在我的单个文件中<
浏览 4提问于2019-11-19得票数 0
回答已采纳
1回答
覆盖Vuetify图标组件
、、、、
由于字体-令人敬畏的图标不是方形的，它会导致不一致的大小和对齐问题。我通过创建一个包装器来解决这个问题，它强制元素为正方形，并使用“字体大小:100%”；它确保包含不规则形状的图标。问题是，所有具有“前置图标”/“附加图标”的vuetify组件在使用字体时仍然显示得很糟糕。我想知道是否有一种方法以不同的名称导入v-图标，在我的包装组件中使用它，然后将我的包装器定义为合法的v-图标。从理论上讲，这将解决<em
浏览 1提问于2019-05-31得票数 1
回答已采纳
我想使用Fontawese5图标与VuetifyJs。这有可能吗？我应该使用哪种npm软件包？因为没人为我工作。作为一个缺乏经验的VuetifyJs开发人员，我真的很困惑如何使用它，因为在VuetifyJs的文档中没有任何明确的步骤。
浏览 3提问于2018-02-14得票数 5
回答已采纳
4回答
Vuetify v-icon通常用一个类表示它的颜色。在我的例子中，当我的路由器链路处于活动状态时，我试图用css类menu-icon来改变它的颜色。<v-btn icon class="menu-btn"> <v-iconclass="menu-icon">
浏览 9提问于2020-03-29得票数 2
回答已采纳
当我与laravel 8一起使用时，我似乎无法加载Vuetify中的材料设计图标。我已经尝试通过NPM添加它们，如中所示，我也尝试使用sass加载它们，如所示。我试图让图标显示在一个基本的(非功能到目前为止)导航栏。>mdi-heart</v-icon> <v-icon</e
浏览 3提问于2021-08-25得票数 1
回答已采纳
2回答
如何在vuetify3和nuxt3中导入自定义svg图标？import customIcon from './myIcon.vue'export default new Vuetify({ iconfont: 'mdi',
valuesmyIcon:
浏览 19提问于2022-09-21得票数 1
回答已采纳
1回答
我尝试了以下文档步骤：// OR// src/plugins/vuetify.js
import Vue from 'vue'
import Vue
浏览 1提问于2021-10-01得票数 0
1回答
我目前正在构建一个带有默认“材料设计图标”的vuetifyjs应用程序。在生产版本中，我只使用这种字体的两个图标(由vuetify组件芯片使用)。如我所建议的，我包括了完整的图标字体
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="
浏览 2提问于2019-08-19得票数 10
回答已采纳
我使用的是vuetify 1.1.8和vue 3.0.0-rc.3。我正在尝试在我的项目中使用一些自定义的SVG图标，这是我设计的，而不是vuetify支持的Material icons或FontAwesome icons中的默认图标
我已经尝试使用vue-svg-loader<v-icon>的地方使用它们。我也读过他们提到的关于使用自定义图标的，但我不认为这也有帮助。
浏览 173提问于2018-07-31得票数 24
我使用的是vuetify的组件工具提示。但我不确定如何在标签旁边实现它。 <v-icon slot="activator" dark color="primary">info</v-icon></v-tooltip>
<v-text-field
浏览 0提问于2020-02-06得票数 1
我正在使用nuxt和vuetify。所有的标签都工作得很好。但是当我使用<v-icon>时，图标不显示..<v-flex xs12 mb-3> <v-icon color="greydarken-4">mdi-facebook</v-ic
浏览 1提问于2019-06-10得票数 3
我有一堆HTML文本，在这个文本中，我想使用一个材料设计图标。例如： var htmlText = "<p>Hello world, have an icon: <v-icon small>mdi-alert</v-icon>.</p> 在模板中，我们将这样编码： <div v-html="htmlText"/> 因为v-icon是一个vuet
浏览 8提问于2020-10-22得票数 0
回答已采纳
是否可以在vuetify文本区域标签中使用v图标代替文本？如果是这样，那么最好的方法是什么。v-textarea label="DEMO"/><v-textarea label=<v-icon>fas fa-lock</v-icon>
value="Hello W
浏览 7提问于2019-10-22得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
