Font-AweSome在Vue中的使用

最新推荐文章于 2024-03-19 09:31:09 发布

置顶请对长亭晚

最新推荐文章于 2024-03-19 09:31:09 发布

阅读量4.5k

点赞数 13

分类专栏： vue 文章标签： css vue.js css3 javascript

本文链接：https://blog.csdn.net/weixin_46242909/article/details/113310505

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Font-AweSome在Vue项目中的使用

看到网上许多的无法使用了，特地来更新一下,图标代码直接在网站里复制
更具体的使用官网和其他文章很详细，这里就不再讲

Font AweSome中文网.
官网

安装项目依赖

1. npm

 npm i font-awesome -S

2. yarn

yarn add font-awesome -S

在main.js中引入

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

Vue中使用

 <i class="fa fa-camera-retro"></i>

在这里插入图片描述

                                `效果`

在这里插入图片描述

优惠劵

请对长亭晚

关注关注

13
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
22
评论
Font-AweSome在Vue中的使用

看到网上许多的文章依赖版本太老没办法用了，这里给上最新版，简单实用
复制链接

扫一扫

专栏目录

如何在Vue中使用Font Awesome？

猿小白的博客

12-16

1万+

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。官网地址：http://www.fontawesome.com.cn/ 目录 1、安装依赖 2、引入依赖 3、使用方式 3.1、基本图标 3.2、大图标 3.3、固定宽度 3.4、用于列表 3.5、边框与对齐 3.6、动画 3.7、旋转与翻转 3.8、组合使用 1、安装依赖 npm install font-awesome --save 2、引入依赖可以选.

解决vue项目使用font-awesome,build后路径的问题

12-03

项目在本地run情况下显示正常，在build后font-awesome的css文件依赖的几个图标文件引用路径报错。在webpack.base.conf.js中关于几个文件的配置如下： { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-...

22 条评论您还未登录，请先登录后发表或查看评论

Vue.js - Font Awesome字体图标的使用详解（vue-fontawesome库）

吐故纳新

09-22

7649

npm i --save@fortawesome/fontawesome-svg-core npm i --save@fortawesome/vue-fontawesome

vue-cli3 引入 font-awesome的操作

11-20

在 package.json 添加 “font-awesome”: “^4.7.0” 执行 npm install 在 main.js 引入 // font import “font-awesome/css/font-awesome.min.css” 补充知识：在Vue2.0中引入font-awesome，并在Element-ui中正确显示font-awesome的icon 如下所示： npm install font-awesome –save 在main.js中引入 import ‘font-awesome/css/font-awesome.css’ 在App.vue的

探索Awesome Vue：一份全面的Vue.js资源指南

最新发布

gitblog_00080的博客

03-19

460

探索Awesome Vue：一份全面的Vue.js资源指南项目地址:https://gitcode.com/vuejs/awesome-vue 在前端开发的世界中，Vue.js以其易学易用、灵活性和强大的功能赢得了开发者们的青睐。为了帮助开发者更好地利用Vue.js，Awesome Vue 是一个精心整理的项目，集合了各种Vue.js相关的工具、库、教程和参考资料，致力于成为Vue生态系统的百科...

Vue2.0项目引入字体库font-awesome

kksw1121

04-13

964

//安装font-awesome npm install font-awesome --save //在main.js中引用 import 'font-awesome/css/font-awesome.css'  ...

在Vue中使用Font Awesome

qq_45954781的博客

03-09

2467

使用Font Awesome 浏览 Font Awesome官网地址：https://fontawesome.dashgame.com/ 使用安装依赖 npm install --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/vue-fontawesome npm install --save @fortawesome/free-solid-svg-icons 创建 fontawesomeUI.js 文件，去

VUE使用font-awesome图标库

zhang8907xiaoyue的博客

08-20

666

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图标库

summer9826的博客

09-13

877

vue中使用Font Awesome图标

Vue3 - Font Awesome字体图标的使用

我不会敲代码

02-09

1046

vue3中引用Font Awesome

vue 改变html font,html页面文字被额外添加font标签，导致vue双向绑定失效

weixin_35398679的博客

06-22

567

前端页面文字被额外添加font标签，导致vue双向绑定失效问题现象描述页面源码chrome 调试element面板结果对比源码和调试结果我们发现，我们的文字内容“你好世界”被font标签包裹住了，而这个在我们的源码里面是没有的，可见这个font标签是由浏览器生成的(因为我们的页面没有执行任何js代码)，最终通过百度查询资料发现，原来这个font标签是由chrome 翻译插件生成的，如图既然我们知道...

Vue 中使用 Font Awesome 字体图标

seimeii的博客

02-03

1493

vue使用最新版font-awesome字体图标库

vue-awesome：Vue.js的真棒SVG图标组件，内置有Font Awesome图标

02-06

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 =" ...

Vue项目中引用font-awesome图标库

前端原创分享

09-19

3370

下载从官网下载压缩包，我下载的是font-awesome-4.7.0，解压后copy到vue项目的static目录下，打开font-awesome-4.7.0文件夹，发现有css,fonts,less,scss等目录，我们只需要css和fonts目录，其余的删除不要。使用在main.js中引用css import '../static/font-awesome-4.7.0/css/f...

Vue 项目中使用 font-awesome

小柒的前端之旅

09-21

4415

前面的话在开发过程中，避免不了使用一些小图标，这篇文章介绍fontawesome。安装命令行敲： npm install font-awesome --save 在入口文件index.js中引入： import 'font-awesome/css/font-awesome.min.css'; 使用方法 主页</i...

vue 中引入font-awesome

聆听。。花开雨落的博客

05-31

1134

vue 中引入font-awesome 直接使用命令npm install font-awesome --save进行安装，安装成功后里面包含样式和字体，然后直接引入样式就可以了入口js中引入 import 'font-awesome/css/font-awesome.min.css' 然后就可以使用了，例如下面这样 ...

【Vue】Vue2（vue-element-admin）使用font-awesome字体图标的解决方案

【敦厚的曹操】的专栏

06-21

729

【代码】【Vue】Vue2（vue-element-admin）使用font-awesome字体图标的解决方案。

图标库使用一（vue-fontawesome）

prayer的博客

12-28

1410

图标库vue-fontawesome的使用方法

vue中使用font-awesome

03-16

在Vue中使用Font Awesome，需要先安装Font Awesome的npm包。可以使用以下命令进行安装： ``` npm install --save @fortawesome/fontawesome-free ``` 安装完成后，在Vue组件中引入需要使用的图标，可以使用以下代码： ```javascript import { library } from '@fortawesome/fontawesome-svg-core' import { faUser } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(faUser) Vue.component('font-awesome-icon', FontAwesomeIcon) ``` 在上面的代码中，我们先从`@fortawesome/fontawesome-svg-core`中导入`library`，然后从`@fortawesome/free-solid-svg-icons`中导入需要使用的图标，这里我们只导入了`faUser`。接着，我们从`@fortawesome/vue-fontawesome`中导入`FontAwesomeIcon`组件，并将`faUser`添加到`library`中。最后，我们将`FontAwesomeIcon`组件注册为全局组件，可以在任何Vue组件中使用。在Vue组件中使用Font Awesome图标，可以使用以下代码： ```html <font-awesome-icon icon="user" /> ``` 在上面的代码中，我们使用`font-awesome-icon`组件，并将`icon`属性设置为需要使用的图标名称，这里我们使用了`user`图标。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交