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

最新推荐文章于 2024-05-15 00:13:17 发布
最新推荐文章于 2024-05-15 00:13:17 发布
阅读量946 收藏 4
点赞数 2
分类专栏： Nuxt.js踩坑笔记 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SongGLing/article/details/125962522
版权

第一步：登录

登录： iconfont阿里巴巴图标

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

在这里插入图片描述

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

在这里插入图片描述

第四步：找到我的项目

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

重新运行项目就可以了

在这里插入图片描述

愈彬
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
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.
nuxt 引入iconfont多色图标
JQG的博客
08-08 4607
symbol引用 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点： 支持多色图标了，不再受单色限制。 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 兼容性较差，支持 ie9+,及现代浏览器。 浏览器渲染svg的性能一般，还不如png。 使用步骤...
2024年最新Nuxt(3)，2024年最新前端开发者面试如何系统复习
最新发布
2401_84418883的博客
05-15 866
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】})
如何在nuxt项目中使用iconfont
李知恩李知金
04-24 1158
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使用iconfont矢量图标
weixin_30778805的博客
09-20 441
　　Nuxt可以使用各种前端UI框架，这些框架一般都自带的有一些icon图标可供用户使用，但是一般项目开发的时候，UI框架自带的icon是不能满足实际项目需求的，这个时候我们可以自己找一些图片放到本地项目里，然后引用这个图片，但是总感觉这样不太好。 这个时候我们可以使用Iconfont-阿里巴巴矢量图标库 下面就讲一讲怎么在nuxt中使用iconfont 一、普通...
nuxt项目中怎么使用iconfont图标
my466879168的博客
05-24 1430
nuxt 项目引入 iconfont 小图标 首先进入 iconfont 的官网https://www.iconfont.cn/选取自己想要的图标然后加入到项目里面 将选好的图标下载到本地 下载好的文件中有几个是不需要的 下载好的文件解压后如下所示： 其中有几个是不需要的 将需要的按照分类添加入项目中 fonts 里面放字体文件 css 文件夹里面放 css 文件 JS 文件夹里面放 JS 文件 使用字体图标 大家既可以在 html 中以类名的形式使用，也可以在伪类的 content 中使用 &l
Nuxt3引入iconfont方法
vdugu的博客
10-25 524
Nuxt3使用iconfont图标
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/...
使用Nuxt.js改造已有项目的方法
10-18
主要介绍了使用Nuxt.js改造已有项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
nuxt-babel：在您的Nuxt应用中使用普通的.babelrc文件
01-31
该插件可将.babelrc优雅地注入到nuxt配置中，使您能够从两全其美中nuxt 。 我们还支持.babelrc.js ， babel.config.js和package.json文件。 安装 npm install --save nuxt-babel 将nuxt-babel添加到您的nuxt....
icons:一些适合nuxt项目的SVG图标
04-12
@ blokwise / icons 安装 将@blokwise/icons依赖项添加到您的项目中： yarn add @blokwise/icons ...使用图标组件 延迟加载图标 图标组件可以作为LazyIconGitHub延迟加载。 学分 许多图标
iconfont使用教程
04-10
iconfont 使用教程 前端所用资源 iconfont 使用教程 前端所用资源
Iconfont 使用及demo（单色、多色、渐变色） 案例demo
04-24
NULL 博文链接：https://it1990eye0920.iteye.com/blog/2415938
在nuxt中使用路由重定向的实例
01-18
我们都知道，在写SPA的时候，我们可以通过配置vue-router来实现路由的重定向。 官方文档（以及ts类型）的定义中给出了这一选项： ...然而，到了SSR的环境下，如果使用nuxt，因为nuxt采用了约定大于配置的
Nuxt3遇见的坑（一）：Nuxt3 引入 iconfont
weixin_43160498的博客
09-28 1567
因为之前的设计师离职了，我们的官网重构只有之前下载本地的iconfont文件。在百度和看文档的时候，看到引入iconfont是这样子的。但是他并没有生效，后面仔细查看文档之后，是这样子的。
(多项目,多个图标库)阿里图标库symbol使用手册, 微信小程序引入多个阿里矢量图标库
Supaopao的博客
06-01 461
修改小程序项目根目录iconfont.json文件，symbol_url字段类型由 string 改为 array, 复制iconfont官网你的项目的Symbol链接。
nuxtjs引入阿里图标iconfont，外部在线链接地址的方式引入
weixin_44679078的博客
02-17 1619
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.js引用iconfont具体操作
zyqgt960812的博客
02-12 569
如果没有assets文件夹，需要手动创建 下载iconfont文件，解压出来
Nuxt 项目引入 iconfont 小图标详解
青颜的天空的博客
08-06 2974
Nuxt.js 项目引入 iconfont 小图标详细步骤
php文件在nuxt3 项目中怎么使用
05-20
在 Nuxt.js 3 中，可以使用 `nuxt-php` 模块来执行 PHP 文件。这个模块使用了 `php-cgi` 来运行 PHP。 首先，需要安装 `nuxt-php` 模块： ``` npm install nuxt-php ``` 然后在 `nuxt.config.js` 中配置： ```js export default { modules: [ 'nuxt-php' ], php: { // PHP 文件所在的目录 dir: '~/php', // PHP 文件的扩展名，默认为 .php ext: '.php', // PHP 进程的最大数量，默认为 5 maxProcesses: 5 } } ``` 现在就可以在页面中使用 PHP 文件了。例如，在页面中使用 `axios` 发送请求调用 PHP 文件： ```html <template> <div> <h1>{{ title }}</h1> <p>{{ content }}</p> </div> </template> <script> export default { async asyncData({ $axios }) { const response = await $axios.get('/api/hello.php') return { title: response.data.title, content: response.data.content } } } </script> ``` 这里假设 `hello.php` 文件位于 `~/php` 目录下。注意，这里的路径是相对于根目录的路径。如果想要使用绝对路径，可以使用 `process.cwd()` 获取当前工作目录的路径并拼接上文件路径。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

愈彬

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

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

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

打赏作者

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

抵扣说明：

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

余额充值