Vue 项目中使用 font-awesome

最新推荐文章于 2024-04-30 17:05:35 发布
最新推荐文章于 2024-04-30 17:05:35 发布
阅读量4.4k 收藏 5
点赞数 2
分类专栏： 知识点滴 文章标签： font-awesome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41257129/article/details/101108826
版权
前面的话

在开发过程中，避免不了使用一些小图标，这篇文章介绍fontawesome。

安装

命令行敲：

npm install font-awesome --save

在入口文件index.js中引入：

import 'font-awesome/css/font-awesome.min.css';
使用方法
<i class="fa fa-home fa-lg"> 主页</i>

在这里插入图片描述

如果图标不够用，这里推荐一个图标更多的网站iconfont

crazy的蓝色梦想
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何在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-...
vue中使用fontawesome字体图标库
m0_52364694的博客
06-30 399
1.将fonts文件到复制到项目根目录下 2.将font-awesome.min.css复制到src目录下 3.main.js中引入font-awesome.min.css，引入代码:import ‘./font-awesome.min.css’
vue3使用Font Awesome
最新发布
weixin_66810621的博客
04-30 608
FontAwesome的图标非常丰富，基本涵盖你所需要的所有，所以我推荐在你的前端项目中使用它！并且它在使用上是方便的，快速的。FontAwesome同样支持vue2！
vue 中引入font-awesome
聆听。。花开雨落的博客
05-31 1142
vue 中引入font-awesome 直接使用命令npm install font-awesome --save进行安装，安装成功后里面包含样式和字体，然后直接引入样式就可以了 入口js中引入 import 'font-awesome/css/font-awesome.min.css' 然后就可以使用了，例如下面这样 <i class="fa fa-book"></i> ...
jquery重写自定义鼠标右键弹出菜单列表
tanqingfu1的博客
03-12 1494
生而为人 谁不付出 谁不努力 jQuery仿电脑桌面点击鼠标右键弹出菜单操作，可自定义添加右键菜单代码。需要使用到一个JS文件mouseRight.min.js 1：参数说明 itemname：表示右键菜单“名称”。 icon：新建项font-awesome图标样式如：fa fa-plus。（特别说明一点icon是要通过样式控制的，请到font-awesome.min.css你们查找）...
Font Awesome 的使用
蜜子的蜜的博客
09-07 7114
加入文件 1.最简单的方式：CDN（由BootCDN提供） 一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西！ 将以下代码粘贴到网页HTML代码的<head>部分. <linkhref="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"> 2.下载文件，使用默认CSS 如果您使用了默认的Bootstrap CSS...
Font Awesome-一款吊炸天的字体图标插件中文全介绍
GarfieldEr007的专栏
09-03 1万+
这款插件是一个不需要图片只需要引入一个字体文件就能制作非常多精美的图标插件，而且这些图标都是矢量的，可以无限放大，而且可以随意的改变颜色，碉堡了！！！ 注意，要看一下内容必须用ie9以上或者是chrome或者是火狐浏览器浏览，ie8一下古董没效果（虽然说是支持ie7的，但是需要引入很多东西，懒得测试= =） 点击下载（版本4.0.3） 使用方法： 解压之后又四个文件夹： 1.把css
vue-cli3 引入 font-awesome的操作
11-20
补充知识：在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的
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 =" ...
Fontawesome字体使用说明及其常用效果语法
shuai_wy的专栏
07-10 2万+
本文主要介绍Fontawesome图标的使用说明及其常用效果语法，在本文中会介绍 图标的旋转，图标的堆叠，图标的规格，图标的方向等常用语法。
Vue项目中使用FontAwesome
心之向往，安之若素
08-29 4792
1、在项目中安装fontawesome：npm install font-awesome --save 2、在main.js中引入相关的文件：import 'font-awesome/css/font-awesome.min.css' 3、在需要使用的地方，class=“fa 类名”，请注意一定要在前面添加fa类，否则无法正常显示； ...
Font-AweSome在Vue中的使用
王光迪的CSDN
01-28 4616
看到网上许多的文章依赖版本太老没办法用了，这里给上最新版，简单实用
Vue.js - Font Awesome字体图标的使用详解（vue-fontawesome库）
吐故纳新
09-22 7768
npm i --save@fortawesome/fontawesome-svg-core npm i --save@fortawesome/vue-fontawesome
BootstrapCDN和本地化
lovoo的博客
10-14 4746
一、搭建bootstap环境 可以用bootstrap的CDN服务，在<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <script s
vue(三)、vue引入font-awesome
qq_34300892的博客
10-26 1080
1、引入依赖 cnpm install font-awesome --save 2、main.js导入 import 'font-awesome/css/font-awesome.min.css'
Font Awesome 入门使用
Alone_in_的博客
11-11 512
一、简介 二、下载 Download 到官网https://www.thinkcmf.com/font_awesome.html下载压缩包解压即可使用，放到项目路径下 复制整个font-awesome目录到你的项目 在你的html<head>标签里, 引入 font-awesome.min.css. <link rel="stylesheet" href="...
vue中使用引用font-awesome字体图标fontawesome 简单方法
Chris__wang的博客
05-06 4667
看见网上相关文档都需要安装好多依赖，有点麻烦，其实只需要安装一个font-awesome就行 第一步安装依赖 cnpm install font-awesome --save 或者 npm install font-awesome --save 个人倾向于前者，因为真快啊 第二步引入依赖样式文件 在main.js文件中引入 //引入font-awesome import ...
关于vue报错This relative module was not found: * ./assets/css/bootstrap.min.css in ./src/main.js
热门推荐
weixin_42476786的博客
09-13 2万+
当我将我的vue项目更换目录提交后报出了这个错误，想起了vue引入jquery和bootstrap时的问题。 所以我尝试着重新执行了引入jquery和bootstrap，步骤如下： 也就是分别执行了： cnpm install jquery –save-dev cnpm install style-loader –save-dev cnpm install css-loade...
如何在vue项目中引入font-awesome样式
04-27
您可以使用以下命令安装font-awesome： ``` npm install --save @fortawesome/fontawesome-free ``` 然后在您的Vue组件中，您可以使用以下代码引入font-awesome： ``` import '@fortawesome/fontawesome-free/css/all.css' ``` 这将在您的项目中添加font-awesome的CSS样式，并使其可用于您的组件。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值