nuxt/vue使用font-awesome

最新推荐文章于 2024-05-30 10:03:08 发布
最新推荐文章于 2024-05-30 10:03:08 发布
阅读量480 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/love_weiai/article/details/120869855
版权

先在官网Font Awesome，一套绝佳的图标字体库和CSS框架下载文件压缩包

之后把解压文件放在vue/nuxt静态文件夹中，因为我用的是nuxt，所以只展示nuxt内的（vue大致相同）

若是局部使用，在文件夹中引入css文件下的font-awesome.min.css

若是全局引入，在nuxt.confing.js中link下

 { rel: 'stylesheet', href: '../font-awesome/4.7.0/css/font-awesome.min.css' }

因本人业务没有使用npm引入，若是需要使用npm引入，请浏览在Nuxt项目中引入fontawesome · 大专栏icon-default.png?t=L9C2https://www.dazhuanlan.com/nonoforever/topics/1031878

 

 

久爱@勿忘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Nuxt3 中使用 Font Awesome 图标
ice breaker's blog
07-11 796
Font Awesome 是世界上最流行和最易用的图标库，让我们在 Nuxt3 中使用它吧。首先我们安装 Font Awesome 图标库核心： 图标库 接着我们安装所有的免费的图标： 当然，如果你使用的是 版本的 ，想使用完整的图标库，可以见此处。由于 Nuxt3 是 vue3 版本语法，所以我们安装时必须使用: 到此所有的 Font Awesome 包都安装完成了，接下来我们开始在 Nuxt3 中使用。在 应用的项目的 目录内，添加一个文件 写入内容: 保存后重新启动，这样这个 会被自动的注册到
fontawesome-module:在Nuxt.js中使用Font Awesome图标的模块
04-14
@ nuxtjs / fontawesome 在您的Nuxt.js项目中使用图标的模块。 在引擎盖下使用 设置 使用npm将依赖项添加到您的项目中 $ yarn add @nuxtjs/fontawesome -D // or to also add the free icon packs $ yarn add @nuxtjs/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons -D 添加@nuxtjs/fontawesome到buildModules在nuxt.config 配置已加载的图标/整个集合 使用'fontawesome'键： // nuxt.config.js buildModules: [ '@nuxtjs/fontawesome' ,
探索未来网页字体的新境界：Nuxt Fonts开源项目深度解析
最新发布
gitblog_00071的博客
05-30 532
探索未来网页字体的新境界：Nuxt Fonts开源项目深度解析 项目地址:https://gitcode.com/nuxt/fonts 在数字化的浪潮中，字体不仅传递信息，更是网站个性与审美的重要载体。今天，我们将深入探索【Nuxt Fonts】——一款专为Nuxt应用程序设计的高效web字体优化和配置解决方案。 项目介绍 Nuxt Fonts是一个零配置即插即用的工具包，旨在简化Nuxt应用中...
在nuxt中引入Font Awesome字体图标库
weixin_34055787的博客
01-27 394
介绍 在element-ui框架中提供了一些图标样式，但是种类比较少，所以在这里提供一套更完善的字体图标库Font Awesome（官方文档），下面就开始介绍如何在一个nuxt项目中使用这套字体库。 引入步骤 1.进入Font Awesome官方网址，下载字体库，官方网址：http://fontawesome.dashgame.com/ 2.下载完成之后，对压缩包进行解压，放置项目中的...
Vue项目中引用font-awesome图标库
前端原创分享，常年坚持记录和分享，全网阅读量超百万
09-19 3397
下载 从官网下载压缩包，我下载的是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...
NuxtWebfontloader高效的Web字体加载从未如此简单
08-10
Nuxt Webfontloader - 高效的Web字体加载从未如此简单！
vue 使用font-awesome 库
淹死的鱼的博客
06-25 183
下载 npm install less less-loader css-loader style-loader file-loader font-awesome -s 引入： import 'font-awesome/css/font-awesome.min.css'
vue-awesome-swiper:NuxtJs中的vue-awesome-swiper示例
04-05
NuxtJs中的vue-awesome-swiper示例 NuxtJs TSX（用于TypeScript的JSX） Swiper v6.0.0版本 # install dependencies $ yarn or yarn install # serve with hot reload at localhost:3000 $ yarn dev index : ...
vue轮播图插件vue-awesome-swiper
08-28
在 SSR 中，可以使用命令方式来使用 Vue-Awesome-Swiper，需要在模板中使用 v-swiper 指令： ``` <div v-swiper:mySwiper="swiperOption"> <!-- swiper content --> </div> </template> ``` 三、配置和事件处理 ...
awesome-nuxt：与Nuxt.js相关的精选真棒精选清单
01-31
awesome-nuxt：与Nuxt.js相关的精选真棒精选清单
nuxt-helpers：有用和与SSR兼容的vue插件的集合，可与nuxt.js一起使用
01-31
Nuxt助手 有用且与SSR兼容的vue插件的集合，可与一起使用 此仓库已不再维护，仅担心nuxt < 1.0.0 请使用Nuxt 1.x切换到正式的:) 产品特点 完全兼容SSR。... //'font-awesome', //'moment', //'offl
Nuxt.js 中使用Swiper Animate
01-07
首先安装在 vue 中使用的 Swiper npm i vue-awesome-swiper --save。 安装完成后，在 plugins 文件夹下新建一个 swiper.js 文件。js文件内容如下 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-...
nuxt 引入第三方字体、艺术字效果
xinTianou123的博客
01-29 2876
在assets文件夹内新建font文件夹，将字体文件(ttf等文件)放在assets/font文件夹内 在assets文件夹内新建css文件夹，然后css文件夹内新建font.css文件： @font-face { font-family: 'modeng'; font-weight: normal; src: url('~assets/fonts/shetumodengxiaofangti.ttf') format('truetype'); } .iconfont { .
nuxt 引入iconfont多色图标
JQG的博客
08-08 4608
symbol引用 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点： 支持多色图标了，不再受单色限制。 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 兼容性较差，支持 ie9+,及现代浏览器。 浏览器渲染svg的性能一般，还不如png。 使用步骤...
H5（nuxt）项目引入字体
破鞋何苦阑珊的博客
09-04 3711
H5（nuxt）项目引入字体 闲话少说 方法1： 1.下载所需要的字体，.ttf格式本文以（FZCYJ.ttf 为例） 2.先自己定义一个font.css文件，字体文件的路径引入 @font-face { font-family: "华文行楷"; src: url('stxingka.ttf'); font-weight: normal; font-style: normal; ...
Nuxt使用iconfont矢量图标
weixin_30778805的博客
09-20 441
　　Nuxt可以使用各种前端UI框架，这些框架一般都自带的有一些icon图标可供用户使用，但是一般项目开发的时候，UI框架自带的icon是不能满足实际项目需求的，这个时候我们可以自己找一些图片放到本地项目里，然后引用这个图片，但是总感觉这样不太好。 这个时候我们可以使用Iconfont-阿里巴巴矢量图标库 下面就讲一讲怎么在nuxt中使用iconfont 一、普通...
图标字体Font Awesome 4.7 的引入与使用
kevin.yau
06-12 3983
下载地址 Download 引入的方式 主要引入font文件夹与font-awasome.min.css文件 假设index.html文件的css都放在同一个目录下的css文件夹中。这时讲fonts文件夹拷入， fonts文件夹需要与css文件夹在同一个目录下，并且是同等级别。 在css中，需要拷入 font-awesome.min.css 文件。 使用 在index.html...
vue中引入font-awesome
elie_yang的博客
06-03 2989
npm i -S font-awesome 之后在main.js中引入font-awesome import 'font-awesome/css/font-awesome.css' 执行npm run dev 时报错了： in ./node_modules/_font-awesome@4.7.0@font-awesome/fonts/fontawesome-webfont.woff?...
nuxt 使用 vue-awesome-swiper
03-27
要在 Nuxt 中使用 vue-awesome-swiper，你需要执行以下步骤： 1. 安装依赖： ```bash npm install vue-awesome-swiper swiper --save ``` 2. 在 nuxt.config.js 中添加 CSS 和插件： ```javascript // nuxt....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值