在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont symbol方式

最新推荐文章于 2024-09-20 10:41:28 发布
最新推荐文章于 2024-09-20 10:41:28 发布
阅读量1k 收藏 2
点赞数 1
文章标签： 前端 quasar iconfont symbol 字体图标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/farewell_w/article/details/114261522
版权

在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont

1. symbol 方式

首先说明一下，这种方法不算规范，但是能用。就是将 iconfont 当成一个插件来使用。

1. 将 iconfont 下载的字体图标压缩包解压下来，找到 iconfont.js
在这里插入图片描述

2. 将 iconfont.js 文件复制到 项目中的 src/boot 文件夹下

在这里插入图片描述

3. 找到项目的 quasar.conf.js 文件，在 boot 下 添加 iconfont

在这里插入图片描述

4. 然后按照官方提供的步骤使用即可生效。
在这里插入图片描述

2. font class 方式（未实践）

这个方式 按我自己的思路，提一下，没有具体实操，理论上可能可行（不可行的话不

最低0.47元/天 解锁文章
未来w
关注
Quasar 前端框架之图标的使用
zz001357的博客
07-04 4854
一、前言 最近在用一个听说好评如潮的（不懂是不是真的，反正能实现项目需求）前端框架做响应式开发，目的是为了用一套代码适配移动端、web端，于是找到了Quasar，用Quasar-cli 开发，碰到一个这样的问题：如何使用图标？ 二、解决 步骤一，目前Quasar支持：Material Icons、Font Awesome、Ionicons、MDIandIcoMoon。也就是说，你只能在这几个网站里使用里面的图标，如果要自己的,emmmmmm.....在网站上传图标吧，或者,我也不会 步骤二，在...
Quasar的配置文件说明
豫
01-11 3741
Quasar的/quasar.conf.js文件配置说明 属性 类型 描述 css Array 来自/src/css/的全局CSS/Stylus/…文件，默认包含的主题文件除外。 preFetch Boolean 启用PreFetch功能. extras Array ...
修改Quasar项目的网页标题图标
weixin_37608086的博客
02-18 1304
修改Quasar项目的网页标题以及图标 把Quasar项目的网页标题以及图标改成自己项目相对应的 Quasar项目启动后网页的标题和图标是Quasar自带的，建立自己的项目时就需要修改了 找到 index.template.html文件，其中title对应的是标题，link中rel为icon对应的是图标，修改成自己想要的即可。 ...
vue+vite项目引入quasar后使用quasar其他图标库
http____的博客
07-30 901
vue + vite构建项目后，引入quasar，并使用quasar的图标库
vue3使用svg图标的方式总结
最新发布
lizi88888的博客
09-20 1169
可以使用Vue插件来管理和使用SVG图标。一些常见的Vue插件，如vue-svg-icon和vue-fontawesome，提供了方便的方式来使用SVG图标。优点：提供了方便的管理和使用SVG图标的方式，可以通过名称来引用SVG图标，减少了重复的代码。使用场景：适用于简单的SVG图标，可以直接在模板中插入SVG代码，无需额外的组件或插件。缺点：不适用于需要在SVG图标上添加交互或动画的情况，无法直接操作SVG图标的内部元素。缺点：不利于复用，当需要在多个地方使用相同的SVG图标时，需要多次复制SVG代码。
icongenie：用于为Quasar应用程序生成所有图标和启动画面的CLI工具
02-04
注意！ 移至Quasar的核心仓库： : Quasar Framework图标精灵 一个Quasar工具，用于生成所有Quasar App的图标和启动画面 什么是Icon Genie 该节点模块从原始的1240x1240正方形图标输出一组SQUARE图标，web图标，pwa图标和电子图标，以及iOS，Windows应用商店和MacOS图标，这些图标既保持透明度，又使资产最小化。 它还将为Cordova /电容器甚至是缩小的svg创建启动屏幕。 它可以跨平台工作，以生成Electron应用程序使用的那些讨厌的.icns和.ico文件，对于后者，某些浏览器和webscrapers（favi
Rust Tauri系列: 项目创建
qq_43957369的博客
11-28 560
我的博客园:https://www.cnblogs.com/MnysLjj/p/17862788.html。最后vite.config.ts文件。
推荐一款强大的前端框架：Quasar Framework
gitblog_00055的博客
05-10 597
推荐一款强大的前端框架：Quasar Framework quasarquasarframework/quasar: 一个基于 Vue.js 的高性能 Web 框架，支持多种平台、组件和工具，适合用于构建跨平台的 Web 应用程序。项目地址:https://gitcode.com/gh_mirrors/qu/quasar Quasar Framework 是一个高效的Vue.js用户界面构建工...
quasar框架中使用q-table改变字体大小样式
前端小白到专家的博客
07-14 688
quasar框架中使用q-table改变字体大小样式的需求，在html的q-table中使用style样式不能生效。
在 Quasar cli 搭建的 vue 项目中 引用 ElementUI 组件
Farewell_w的博客
03-01 2019
在 Quasar cli 搭建的vue项目中 引用 ElementUI 组件 最近在发现有一个知乎上吹爆好用的前端ui框架 quasar，支持全平台。 同时针对所有平台的源代码：响应式桌面/移动网站，PWA（渐进式Web应用程序），移动APP（外观原生）和多平台桌面应用程序（通过Electron） （摘抄自官网） 这么牛逼，当然要来试试水啦，quasar 比较新，国内也比较少用，所以出bug的时候在网上比较难找到解决方法，所以在这里记录以下。 先简单介绍以下 quasar， 官方网站： http://w
vue-cli-plugin-quasar：Quasar Framework Vue CLI插件
02-03
类星体框架：vue-cli-plugin-quasar :rocket: 在2分钟内开始使用Quasar Framework构建Vue应用！ :warning_selector: 为了获得Quasar的高级（推荐）体验，包括构建Mobile＆Electron应用程序以及轻松升级到新...
vue-quasar-manage：基于Vue quasar的管理系统模板
02-04
Vue-Quasar-Manage是一种中后台前端解决方案： 基于和实现， 的设计规范来自 包含动态路由，动态缓存，权限验证等常用功能 响应式设计，SPA /电子/移动/ Cordova兼容良好 包含tagView快捷导航，面包屑导航等SPA应用...
基于quasar cli搭建的民宿介绍静态网页源码
10-16
在这个项目中，我们看到的是一个利用Quasar CLI创建的民宿介绍静态网页的源码。 首先，Quasar CLI提供了命令行接口，允许开发者通过简单的命令初始化项目、安装依赖、构建和运行应用。例如，`quasar create`命令...
手把手教你在vue项目中使用iconfont的Symbol
hsany330的专栏
04-12 1659
symbol 支持多色图标了，不再受单色限制。 支持像字体那样通过font-size,color来调整样式。 支持 ie9+ 可利用CSS实现动画。 减少HTTP请求。 矢量，缩放不失真 可以很精细的控制SVG图标的每一部分 symbol是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。具体相关的可以参考这篇文章：手摸手，带你优雅的使用 icon 话不多说，下面说一下具体使用的方法 1.首先你需要在iconfont里面注册一个账号，如图，里面有很多icon可以使用 2.选择你需要
vue-quasar 使用图标方法
luoliwoshang的博客
06-21 2636
vue-cli 版本 4.5.13 1.添加quasar到vue项目中 虽然quasar有自己的脚手架，但是在使用过程中，与平常开发vue项目会有许多不同，所以添加quasar框架到vue项目中,即可达到开发者希望的效果 $ vue add quasar 接下来会在src下生成一个quasar.js的文件，此文件存放所有quasar框架的配置，我们的图标配置也应该存放在文件中 2.添加相应的图标库 quasar直接支持的库有Material Icons、Font Awesome、Ionicons、
vue项目中正确使用iconfont
qq_37046171的博客
04-11 5807
1、打开 iconFont官网 选择自己喜欢的图标，并且添加购物车2、点击购物车，添加至项目3、下载至本地4、把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下（可创建一个css文件或iconfont文件） 5、在main.js中引入iconfont.css样式 import './assets/iconfont/iconfont.css...
使用Quasar设计Material和IOS风格的响应式网站
weixin_34217711的博客
02-28 508
GITHUB：使用Quasar设计旅游网站文章链接：使用Quasar设计Material和IOS风格的响应式网站 Quasar Quasar是一款基于Vue.js开发的UI框架，可以让你轻松构建网站简洁明快的界面，更重要的是它还能让你轻松做好RWD（响应式网站设计），除此之外还能帮助你加上PWA，使你的网页变成手机上的App。 以下内容...
vue项目如何引入iconfont
锅巴胸的博客
07-30 4126
下面以vue项目引入阿里巴巴的iconfont图标为例： 一 .去https://www.iconfont.cn/注册登陆找到你喜欢的图标 二. 加入购物车 三. 下载源码 点击右上角购物车图标,选择下载源码 四.源码放入项目 五.全局引入 在main.js里引入css 六.在需要的地方使用 拿设置图标为例: 它的icon叫setup 我想把它加入在导航里 效果: ...
vue 点标记 高德地图_vue-quasar引入高德地图及如何添加点标记
weixin_29410963的博客
12-28 974
一.前提1. 首先，注册开发者账号，成为高德开放平台开发者2. 登陆之后，在进入「应用管理」 页面「创建新应用」3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI )」二.步骤在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；[HTML](javascript:void(0);)2. 添加div标签作为地图容器，同时为该d...
怎么在vue中使用quasar framework
07-16
在Vue中使用Quasar Framework非常简单。下面是一些基本步骤： 1. 首先，确保你已经安装了Vue CLI。如果没有安装，可以按照Vue CLI的官方文档进行安装。 2. 创建一个新的Vue项目： ``` vue create my-quasar-project ``` 3. 进入项目目录： ``` cd my-quasar-project ``` 4. 安装Quasar CLI： ``` npm install -g @quasar/cli ``` 5. 创建一个Quasar项目： ``` quasar create ``` 在这个过程中，你可以选择使用默认配置或者自定义配置。 6. 进入Quasar项目目录： ``` cd my-quasar-project ``` 7. 启动开发服务器： ``` quasar dev ``` 这将启动一个开发服务器，并在浏览器中打开Quasar应用。 现在你已经成功地将Quasar Framework集成到Vue项目中了。你可以根据Quasar文档来学习如何使用它的组件、布局和其他功能。祝你使用Quasar Framework愉快！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值