VUE学习(二十) 使用awesome 图标

已于 2023-02-22 14:00:10 修改
阅读量382 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： # VUE3 文章标签： 学习
于 2023-02-22 13:56:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/easyboot/article/details/129161297
文章介绍了如何通过npm安装FontAwesome库，然后在main.js中引入其CSS文件，接着在Vue组件中利用<i>标签结合类名来使用这些图标，展示了在Vue应用中使用FontAwesome图标的一个具体例子。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.使用npm安装 awesome 

 2.在main.js 中引入

import  'font-awesome/css/font-awesome.css'

3.在VUE中使用

 <el-button type="primary" @click="sendCMD"><i class="fa fa-user"></i>Send</el-button> 

4.效果图

 

 

vue-awesome（基于Vue.js的SVG图标组件）
郭宝的博客
08-17 5843
vue-awesome 是什么？ Vue-Awesome 是基于Vue.js的 SVG 图标组件，内置图标来自Font Awesome。 GitHub 介绍地址：https://github.com/Justineo/vue-awesome/blob/master/README.zh_CN.md 怎么使用vue-awesome ? 1、首先通过 npm 安装vue-awesome npm install vue-awesome 2、在 main.js 中的全局引入 // 在不关心...
《Vue3笔记》第11节：Vue3项目引入Font Awesome图标库
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
12-30 201
这篇文章还是基于之前的代码之上，介绍Vue3项目中如何引入第三方的图标库。前一个小节介绍了如何引入中的图标库，但是中的图标很少，有可能不满足我们的需求，这个时候就需要使用第三方的图标库，这个小节介绍如何引入图标库。是一个第三方提供的图标库，v5版本提供了1820个图标，可以覆盖大部分的图标使用场景了，可以去官网查看有哪些图标。
vue-awesome：Vue.js的真棒SVG图标组件，内置有Font Awesome图标
02-06
Vue很棒 Vue.js的超棒SVG图标组件，带有内置的Font Awesome图标。 Vue-Awesome 的SVG图标组件，内置图标由。 在查看演示。 安装 npm（推荐） $ npm install vue-awesome 凉亭 $ bower install vue-awesome 手册 只需下载dist/vue-awesome.js并将其包含在您HTML文件中即可： < script src =" path/to/vue-awesome/dist/vue-awesome.js " > </ script > 用法 <!-- basic --> < v-icon name ="
Vue-Awesome：为Vue.js打造的SVG图标组件库
gitblog_00454的博客
08-13 644
Vue-Awesome：为Vue.js打造的SVG图标组件库 项目地址:https://gitcode.com/gh_mirrors/vu/vue-awesome 项目介绍 Vue-Awesome 是一个专为 Vue.js 设计的 SVG 图标组件库，内置了 Font Awesome 的图标。这个开源项目不仅提供了丰富的图标选择，还支持动态调整图标大小、旋转、翻转等多种功能，使得图标的使用更加灵活...
vue3实战第四步：引入Font Awesome图标库(二)
最新发布
qq_33911541的博客
06-06 930
是一个第三方提供的图标库，v5版本提供了1820个图标，可以覆盖大部分的图标使用场景了。提供的Vue3组件依赖：https://www.npmjs.com/package/@fortawesome/vue-fontawesome。
VUE使用font-awesome图标库
zhang8907xiaoyue的博客
08-20 754
1、main.js配置 //引入fontawesome配置 import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; import { faTruck, } from '@fortawesome/free-solid-svg-icons'; library.add( faTruck, ); Vue
Vue 中使用 Font Awesome 字体图标
seimeii的博客
02-03 1619
vue使用最新版font-awesome字体图标库
让你在Vuepress中可以直接使用FontAwesome的图标
08-08
4. **在Vuepress中使用图标**：现在你可以在Markdown文件中使用这个自定义组件来显示Font Awesome图标。例如： ```markdown --- layout: default --- # 页面标题 这是一个示例图标：<FontAwesome icon=...
vue-awesome-icon-picker:一个Vuejs图标选择器组件，可以轻松选择并使用FontAwesome 5 Icon
05-23
一个Vue.js图标选择器组件，可以轻松选择并使用FontAwesome 5 Icon。 目录 安装 使用npm安装 npm install --save @rightbraintechbd/vue-awesome-icon-picker 或通过cdn使用它 < script src =" ...
开发一个vue3的fontawesome选择图标插件
开源低代码平台-Microi吾码-框架C#.NET8 + Vue3
11-09 1001
fontawesome-data.js文件见资源 父组件调用fontawesome-base.vue组件 以上代码同样适用于vue2，因为就是从vue2迁移到vue3的：） 该组件源码以及应用，同样包含在【开源低代码平台Microi吾码】传统界面源码项目中 开源地址：https://gitee.com/ITdos/microi.net 平台预览图
Vue 第三方字体图标引入 Font Awesome的方法
12-10
**在Vue组件中使用Font Awesome图标** 引入样式后，你可以在Vue组件中直接使用Font Awesome的类名来显示图标。Font Awesome的图标类通常由两部分组成：`fa`基础类和具体的图标类。例如，如果你想显示"camera-retro...
Awesome - Vue 系列.zip
09-24
Awesome - Vue 系列.zip,与vue.js相关的令人敬畏的事情的列表
最新font awesome 图标展示
06-27
最新font awesome 图标展示，　用的时候方便查看要使用哪个图标
Vue-Awesome：将Font Awesome图标融入Vue.js的绝佳方案
gitblog_01248的博客
10-18 595
Vue-Awesome：将Font Awesome图标融入Vue.js的绝佳方案 vue-awesome Awesome SVG icon component for Vue.js, built-in with Font Awesome icons. ...
【亲测免费】 VueAwesome 教程
gitblog_01036的博客
08-13 565
VueAwesome 教程 vue-awesomeAwesome SVG icon component for Vue.js, built-in with Font Awesome icons.项目地址:https://gitcode.com/gh_mirrors/vu/vue-awesome 1. 项目目录结构及介绍 VueAwesome 是一个用于创建图标集合的库，它基于 Feather i...
vue-awesome
qq_15679453的博客
04-03 408
vue-awesome是基于 font-awesome发展而来 常用图表库 阿里iconFont iconMoon vue-awesome
awesome图标库
rui15111的博客
11-17 1010
一套字库, 675个图标FontAwesome是一种带有网页功能的象形文字语言，并收集在一个集合里。 不需要 JavaScript 支持更少的兼容性问题，因为该字体不需要javascript 无限的扩展性可缩放的矢量图形，每个图标在放大或者缩小的时候看起来都正常 完全开源免费该字体是完全开源并且免费的，查看许可证. CSS 控制可以轻松的用css来控制字体的颜色，大小，阴影等！
vue引入Vue-Awesome
weixin_30861797的博客
08-30 545
Vue-Awesome建立在Font Awesome上v4.5.0，取决于Vue.jsv2.0.1+，所以安装了Vue-Awesome就可以直接使用Font Awesome的字体图标。 1.安装Vue-Awesome 　　$npminstallvue-awesome 2.引入Vue-Awesome 　　在main.js文件中加入以下代码： 　　　　import 'vue-aw...
awesome字体图标库
weixin_45766034的博客
10-09 439
1.进入官网进行下载 2.真实项目中的目录 font-awesome.css是全局导入的 去网站挑选自己需要的图标,本地 即可
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值