在Nuxt项目中使用iconfont阿里巴巴图标unicode

最新推荐文章于 2025-08-05 18:29:34 发布
原创 最新推荐文章于 2025-08-05 18:29:34 发布 · 1.2k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文详细介绍了如何从头到尾将阿里巴巴Iconfont图标整合到项目中的步骤，包括登录Iconfont、选择并添加图标到购物车、下载图标文件、拷贝到项目中的fonts文件夹、引入iconfont.css文件，并修改其路径，最后在nuxt.config.js中配置引入。通过这些步骤，可以成功将图标应用于项目。

第一步：登录

登录： iconfont阿里巴巴图标

第二步：选择图标添加到购物车

在这里插入图片描述

第三步：把购物车图标添加到项目

在这里插入图片描述

第四步：找到我的项目

在这里插入图片描述

第五步：将图标文件下载到本地

在这里插入图片描述

第六步：在assets文件夹中创建一个fonts文件夹，然后将压缩包中解压出来的文件，后缀名为：.ttf、.woff、.woff2，拷贝到该文件夹下

在这里插入图片描述

在这里插入图片描述

第七步：将压缩包中的icon font.css文件，拷贝到自己的项目中

在这里插入图片描述

第八步：修改icon font.css文件中的路径

在这里插入图片描述

第九步：在nuxt.config.js中引入icon font.css文件

重新运行项目就可以了

在这里插入图片描述

nuxt 项目引入自定义svg图标和iconfont.js
cpa0701的博客
05-07 1779
引入iconfont.js 因为iconfont相当于插件了，所以要在nuxt.config.js中的plugins中进行注入 plugins: [{ src: "./static/font/iconfont.js", ssr: false }] ssr要使用false，因为iconfont.js中有用到window，在服务端渲染时会报错 不要在组件中引用，在nuxt中要当成插件引入 引...
如何在nuxt项目中自定义模板
最新发布
胡西风的博客
08-05 619
本文详细介绍了在Nuxt.js框架中自定义HTML模板的方法。对于Nuxt 2，可通过创建app.html文件或修改nuxt.config.js中的render选项来实现；Nuxt 3则主要通过app.vue组件、nuxt.config.ts配置和app目录扩展来完成。文章涵盖了两种版本的具体实现步骤，包括添加全局脚本、CSS样式、加载动画等常见场景，并强调了SSR兼容性、变量保留等注意事项。这些方法特别适用于集成第三方工具、优化首屏体验等定制化需求，帮助开发者灵活控制项目结构。
Nuxt使用iconfont矢量图标
weixin_30778805的博客
09-20 536
　　Nuxt可以使用各种前端UI框架，这些框架一般都自带的有一些icon图标可供用户使用，但是一般项目开发的时候，UI框架自带的icon是不能满足实际项目需求的，这个时候我们可以自己找一些图片放到本地项目里，然后引用这个图片，但是总感觉这样不太好。 这个时候我们可以使用Iconfont-阿里巴巴矢量图标库 下面就讲一讲怎么在nuxt中使用iconfont 一、普通...
iconfont使用教程
04-10
iconfont 使用教程 前端所用资源 iconfont 使用教程 前端所用资源
nuxt-fontagon:尝试将svg轻松转换为字体，以自动制作图标字体。 Nuxt模块上提供了Icon-Font生成器Fontagon
05-28
:paw_prints: 纳克斯特·方塔贡 轻松将SVG从nuxt转换为图标字体。 尝试将svg轻松转换为字体，以自动制作图标字体。 Icon-Font生成器在Nuxt模块上可用。 信息 :bell: 该软件包已从nuxt-iconfont-generator重命名为nuxt-fontagon 特征 √在构建时自动将svg转换为字体文件√根据svg文件名，根据需要创建CSS和Stylus ， SASS和LESS文件 :bell: nuxt-fontagon使用Fontagon功能。 请参阅 安装 将nuxt-fontagon依赖项添加到您的项目中 # Using npm npm install --save-dev nuxt-fontagon # Using yarn yarn add --dev nuxt-fontagon 添加nuxt-fontagon到buildModules的部分nuxt.config.
nuxtjs引入阿里图标iconfont，外部在线链接地址的方式引入
weixin_44679078的博客
02-17 1877
Font class 的方式 复制图标链接地址 打开nuxt.config.js文件，在里面link的位置添加外部css链接地址 { rel: "stylesheet", href: "https://at.alicdn.com/t/xxx.css" } 如下： 在页面中使用图标 // iconfont是图标项目的默认Font Family; icon-xxx是图标的名称 <i class="iconfont icon-xxx"></i> Symbol 的方式
nuxt项目中怎么使用iconfont图标
my466879168的博客
05-24 1593
nuxt 项目引入 iconfont 小图标 首先进入 iconfont 的官网https://www.iconfont.cn/选取自己想要的图标然后加入到项目里面 将选好的图标下载到本地 下载好的文件中有几个是不需要的 下载好的文件解压后如下所示： 其中有几个是不需要的 将需要的按照分类添加入项目中 fonts 里面放字体文件 css 文件夹里面放 css 文件 JS 文件夹里面放 JS 文件 使用字体图标 大家既可以在 html 中以类名的形式使用，也可以在伪类的 content 中使用 &l
精选资源
nuxt-babel：在您的Nuxt应用中使用普通的.babelrc文件
01-31
该插件可将.babelrc优雅地注入到nuxt配置中，使您能够从两全其美中nuxt 。 我们还支持.babelrc.js ， babel.config.js和package.json文件。 安装 npm install --save nuxt-babel 将nuxt-babel添加到您的nuxt....
精选资源
create-nuxt-antd:使用ant-design的nuxt项目
05-15
使用ant-design的nuxt项目 构建设置 # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn run dev # build for production and launch server $ yarn run build $ yarn start...
如何在nuxt项目中进行meta信息注入
胡西风的博客
08-05 644
本文详细介绍了在Nuxt.js框架中配置Meta信息的多种方法。全局配置可在nuxt.config.js中设置默认Meta值，页面级配置通过head()方法覆盖全局设置，组件中也可单独配置。文章重点讲解了动态Meta生成方式，包括基于接口数据和使用useHead组合式API（Nuxt 3）。特别强调了hid标识符的重要性，用于避免Meta标签重复。配置遵循页面级优先于全局的原则，同时支持服务端渲染，确保SEO友好性。这些方法使开发者能灵活管理不同页面的标题、描述等关键SEO元素。
Iconfont 使用及demo（单色、多色、渐变色） 案例demo
04-24
NULL 博文链接：https://it1990eye0920.iteye.com/blog/2415938
nuxt 引入iconfont多色图标
JQG的博客
08-08 4852
symbol引用 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点： 支持多色图标了，不再受单色限制。 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 兼容性较差，支持 ie9+,及现代浏览器。 浏览器渲染svg的性能一般，还不如png。 使用步骤...
Nuxt.js引用iconfont具体操作
zyqgt960812的博客
02-12 671
如果没有assets文件夹，需要手动创建 下载iconfont文件，解压出来
如何在nuxt项目中使用iconfont
李知恩李知金
04-24 1365
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
Nuxt3引入iconfont方法
vdugu的博客
10-25 1008
Nuxt3使用iconfont图标
Nuxt.js 使用 iconfont 导入流程
卡尔特斯
08-31 425
如果没有 assets 文件夹，需要手动创建。 下载 iconfont 文件，解压出来！ 在 assets 文件夹中创建一个 iconfont 文件夹，将上面解压出来的文件拖到 /assets/iconfont 文件夹中。 然后找到 nuxt.config.js 添加 css 配置 css: [ '~/assets/iconfont/iconfont.css' ] 使用 ...
Nuxt 项目引入 iconfont 小图标详解
青颜的天空的博客
08-06 3479
Nuxt.js 项目引入 iconfont 小图标详细步骤
Nuxt3-前端-引入阿里图标iconfont
weixin_45558196的博客
05-28 414
本文介绍了在Nuxt3项目中引入阿里图标库的两种解决方案。作者作为前端开发人员，在从Vue3迁移到Nuxt3时遇到了图标库引入问题。第一种方法是通过JavaScript动态创建script标签加载本地iconfont.js文件；第二种方法是通过Nuxt配置文件的plugins选项导入，但需要修改原始文件添加defineNuxtPlugin包装。文章特别强调了第二种方法必须设置mode为client以避免服务端报错。两种方案均通过实际测试验证有效，解决了symbol图标显示异常和报错问题。
(多项目,多个图标库)阿里图标库symbol使用手册, 微信小程序引入多个阿里矢量图标库
Supaopao的博客
06-01 637
修改小程序项目根目录iconfont.json文件，symbol_url字段类型由 string 改为 array, 复制iconfont官网你的项目的Symbol链接。
nuxt-aos，在nuxt项目中使用
11-13
`Nuxt-AOS` 是一个基于 Vue 的 Nuxt.js 插件，它提供了动画滚动 (Animate On Scroll, AOS) 功能，让您的网站元素在页面滚动时优雅地进入视口，增加用户的交互体验。AOS 是一个 JavaScript 库，适用于各种滚动动画效果。 要在 Nuxt 项目中使用 `Nuxt-AOS`，您需要执行以下步骤： 1. **安装插件**: 使用 npm 或 yarn 安装： ```bash // 如果使用 npm npm install nuxt-aos // 如果使用 yarn yarn add nuxt-aos ``` 2. **配置 Nuxt.config.js**: 将 `nuxt-aos` 添加到 `plugins` 配置中： ```javascript export default { plugins: [ { src: '~/plugins/nuxt-aos', ssr: false }, // ssr: false 避免在服务器端渲染时应用动画 ], } ``` 3. **引入并使用组件**: 在您的 .vue 文件中导入 `AOS` 组件，然后在需要动画的元素上使用它： ```html <template> <div> <AOS v-on:aos-enter="animationEnter" v-on:aos-enter-after="animationEnterAfter"> <!-- Your element with animation --> <div class="animated-element">...</div> </AOS> </div> </template> <script> import AOS from 'nuxt-aos'; export default { components: { AOS, }, methods: { animationEnter() { // 进入动画处理 }, animationEnterAfter() { // 元素完全进入视口后处理 }, }, }; </script> ``` 4. **自定义动画**: 您还可以根据需要设置 `aos-animate` 类来自定义动画效果，如 duration、delay 和 easing 等参数。更多详情可参考 `AOS` 的官方文档或 GitHub 页面。 记得检查项目是否已安装了适当的 CSS 框架（如 Animate.css），因为 `Nuxt-AOS` 需要它们来实现动画。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

愈彬

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

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

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

打赏作者

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

抵扣说明：

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

余额充值