Nuxt.js 使用 iconfont 导入流程

最新推荐文章于 2025-01-05 16:00:50 发布
最新推荐文章于 2025-01-05 16:00:50 发布
阅读量401 收藏
点赞数
分类专栏： Nuxt.js 文章标签： css html nuxt.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zz00008888/article/details/120021545
版权

  • 如果没有 assets 文件夹，需要手动创建。

  • 下载 iconfont 文件，解压出来！

    image.png

  • 在 assets 文件夹中创建一个 iconfont 文件夹，将上面解压出来的文件拖到 /assets/iconfont 文件夹中。

    image.png

  • 然后找到 nuxt.config.js 添加 css 配置

    css: [
    '~/assets/iconfont/iconfont.css'
]

    image.png

  • 使用

    image.png

    image.png

nuxt 项目引入自定义svg图标和iconfont.js
cpa0701的博客
05-07 1697
引入iconfont.js 因为iconfont相当于插件了，所以要在nuxt.config.js中的plugins中进行注入 plugins: [{ src: "./static/font/iconfont.js", ssr: false }] ssr要使用false，因为iconfont.js中有用到window，在服务端渲染时会报错 不要在组件中引用，在nuxt中要当成插件引入 引...
『踩坑记录』 解决Nuxt.js 打包后 Ant Design 的 dist.js 图标文件过大的问题
u013588234的博客
02-22 954
解决Nuxt.js 打包后 Ant Design 的 dist.js 图标文件过大的问题
iconfont使用教程
04-10
iconfont 使用教程 前端所用资源 iconfont 使用教程 前端所用资源
Nuxt使用iconfont矢量图标
weixin_30778805的博客
09-20 488
　　Nuxt可以使用各种前端UI框架，这些框架一般都自带的有一些icon图标可供用户使用，但是一般项目开发的时候，UI框架自带的icon是不能满足实际项目需求的，这个时候我们可以自己找一些图片放到本地项目里，然后引用这个图片，但是总感觉这样不太好。 这个时候我们可以使用Iconfont-阿里巴巴矢量图标库 下面就讲一讲怎么在nuxt中使用iconfont 一、普通...
如何在nuxt项目中使用iconfont
李知恩李知金
04-24 1310
1.在iconfont选取图标，并下载项目，不用多说，懂得都懂 2.将下载文件解压，把解压后文件夹里面的文件全部复制到asstes目录下fonts文件夹里 3.在nuxt.config.js中添加 css: [ '@/assets/fonts/iconfont.css' ], plugins: [ { src: '@/assets/fonts/iconfont.js', ssr: false } ], 4.在页面中可以使用了 <i class="iconf
Nuxt.js引用iconfont具体操作
zyqgt960812的博客
02-12 640
如果没有assets文件夹，需要手动创建 下载iconfont文件，解压出来
nuxt项目中怎么使用iconfont图标
my466879168的博客
05-24 1545
nuxt 项目引入 iconfont 小图标 首先进入 iconfont 的官网https://www.iconfont.cn/选取自己想要的图标然后加入到项目里面 将选好的图标下载到本地 下载好的文件中有几个是不需要的 下载好的文件解压后如下所示： 其中有几个是不需要的 将需要的按照分类添加入项目中 fonts 里面放字体文件 css 文件夹里面放 css 文件 JS 文件夹里面放 JS 文件 使用字体图标 大家既可以在 html 中以类名的形式使用，也可以在伪类的 content 中使用 &l
'~/assets/css/iconfont/iconfont.js'nuxt引入js文件报错
最新发布
03-08
### Nuxt 项目中引入 `iconfont.js` 文件报错解决方案 在 Nuxt 项目中引入 `iconfont.js` 需要遵循特定配置以确保文件能够正常加载并生效。以下是详细的解决方案： #### 方法一：通过 CSS 属性引入 IconFont 资源 ...
nuxt使用有颜色的iconfont
12-17
在Nuxt.js中，如果你想要使用带颜色的Iconfont，首先你需要确保已经在项目中安装了Nuxt CLI和Vue cli，因为Nuxt基于Vue构建。以下是步骤： 1. **添加Iconfont依赖**: - 在`npm`或`yarn`包管理器中安装`vue-font...
使用Nuxt重构已有Vue项目(Axios默认根域名、切换Vuetify字体、配置Mavon编辑器和常见异常解决localStorage/window/document is not defined)
"✧treasure mountain✧"
05-23 6964
近日用Vue写了个小项目 但由于Vue的特性 导致项目的SEO并不是很好 因此用Nuxt重构了该项目 对项目进行了一次优化 由于之前并没有相关的经验 因此遇到不少的坑 特此记录一下 一、概念 什么是Nuxt Nuxt.js是Vue.js的通用框架 常用来作服务器端渲染(Server Side Rendering 简称SSR) Vue适合用于开发SPA单页面应用 但因其数据绑定特性 导致爬虫只能爬取页面模板 并不能爬到渲染好的数据 不利于网站排名 对于公司内部网站等不需要排名的网站 可以不用SEO 但对于那些
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项目中使用iconfont阿里巴巴图标unicode
SongGLing的博客
07-24 1145
在Nuxt项目中使用iconfont阿里巴巴图标unicode
Nuxt3引入iconfont方法
vdugu的博客
10-25 915
Nuxt3使用iconfont图标
Nextjs SSR使用Iconfont彩色图标
weixin_42856210的博客
01-05 765
最近在把一个老React项目改造为Nextjs，充分利用SSR优化SEO。改造过程中碰到原来引用的Iconfont图标报错：Switched to client rendering because the server rendering errored: window is not defined.原来是之前引入的iconfont.js中的window不支持服务端渲染。一阵捣鼓后终于解决了。
next.js 中iconfont Symbol 加载svg优化
小码的博客
11-09 1095
next.js 中iconfontSymbol 加载svg优化。 按照常规方法加载iconfontSymbol （例如：https://blog.csdn.net/qq_41211900/article/details/108443521） 页面会生成这样： <svg class="icon " aria-hidden="true"><use xlink:href="#icon-mobile"> <svg id="icon-mobile" viewBox="0 ..
react next.js中引用iconfont中的svgsymbol模式方法
小码的博客
09-07 1132
import React, { Component,memo } from 'react' class icon extends Component { componentDidMount() { if(typeof window !== 'undefined'){ require('../public/js/iconfont.js'); } } render() { //console.log("props",this.props); const {classNa.
【Nuxt】在 Nuxt3 中使用 nuxt-icons 实现 icon svg 的动态变色效果
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
02-23 1830
然后在代码中使用，使用组件传参就行，改颜色需要用到深度选择器，vue3 就是。自己去看官网文档就行。
nextjs中阿里icon库的引入使用
祥哥的说
10-30 3026
阿里icon库地址 引入方法： 1、font class引入 在我的项目myblog中，下载至本地 解压之后在demo_index.html文件中选择图标引入方式，blog中使用了font class的引入方法，即将iconfont.css文件，放到public中进行维护，同时在layout中引入,注意这个这里的href路径，使用的是根路径格式，相等路径不好使。 <link rel="stylesheet" href="/aliIcon/iconfont.css"></link>
探索 Nuxt Icon：赋予你的 Nuxt 应用无限图标可能
gitblog_00084的博客
06-20 795
探索 Nuxt Icon：赋予你的 Nuxt 应用无限图标可能 去发现同类优质开源项目:https://gitcode.com/ 在构建现代化的前端应用时，图标库是必不可少的一部分，它为界面提供视觉吸引力和易用性。今天，我们向您推荐一个强大的 Nuxt.js 模块——Nuxt Icon，它基于 Iconify，提供了超过 200,000 个预处理的矢量图标供您直接使用。 项目介绍 Nuxt Ico...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卡尔特斯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值