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

最新推荐文章于 2024-09-02 17:34:07 发布
最新推荐文章于 2024-09-02 17:34:07 发布
阅读量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
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue项目中引用‘阿里巴巴字体图标库iconfont’
m0_61043185的博客
04-02 816
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
Vue项目中引用‘阿里巴巴字体图标库iconfont’(1)
m0_61043185的博客
04-02 611
分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**
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
vue+vite项目引入quasar后使用quasar其他图标库
http____的博客
07-30 866
vue + vite构建项目后，引入quasar，并使用quasar的图标库
修改Quasar项目的网页标题图标
weixin_37608086的博客
02-18 1273
修改Quasar项目的网页标题以及图标 把Quasar项目的网页标题以及图标改成自己项目相对应的 Quasar项目启动后网页的标题和图标是Quasar自带的，建立自己的项目时就需要修改了 找到 index.template.html文件，其中title对应的是标题，link中rel为icon对应的是图标，修改成自己想要的即可。 ...
Rust Tauri系列: 项目创建
qq_43957369的博客
11-28 524
我的博客园:https://www.cnblogs.com/MnysLjj/p/17862788.html。最后vite.config.ts文件。
推荐一款强大的前端框架：Quasar Framework
gitblog_00055的博客
05-10 521
推荐一款强大的前端框架：Quasar Framework quasarquasarframework/quasar: 一个基于 Vue.js 的高性能 Web 框架，支持多种平台、组件和工具，适合用于构建跨平台的 Web 应用程序。项目地址:https://gitcode.com/gh_mirrors/qu/quasar Quasar Framework 是一个高效的Vue.js用户界面构建工...
在 Quasar cli 搭建的 vue 项目中 引用 ElementUI 组件
Farewell_w的博客
03-01 1974
在 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应用程序以及轻松升级到新...
基于quasar cli搭建的民宿介绍静态网页源码.zip
12-17
本项目是使用Quasar CLI搭建的一个民宿介绍静态网页的源代码，适用于学习和实践。 首先，Quasar CLI允许开发者通过简单的命令行接口（CLI）初始化一个新的项目。使用`quasar create`命令，我们可以选择不同的模板来...
基于quasar cli搭建的民宿介绍静态网页源码
10-16
在这个项目中，我们看到的是一个利用Quasar CLI创建的民宿介绍静态网页的源码。 首先，Quasar CLI提供了命令行接口，允许开发者通过简单的命令初始化项目、安装依赖、构建和运行应用。例如，`quasar create`命令...
Quasar的配置文件说明
豫
01-11 3716
Quasar的/quasar.conf.js文件配置说明 属性 类型 描述 css Array 来自/src/css/的全局CSS/Stylus/…文件，默认包含的主题文件除外。 preFetch Boolean 启用PreFetch功能. extras Array ...
quasar框架中使用q-table改变字体大小样式
前端小白到专家的博客
07-14 638
quasar框架中使用q-table改变字体大小样式的需求，在html的q-table中使用style样式不能生效。
Quasar 前端框架之图标的使用
zz001357的博客
07-04 4773
一、前言 最近在用一个听说好评如潮的（不懂是不是真的，反正能实现项目需求）前端框架做响应式开发，目的是为了用一套代码适配移动端、web端，于是找到了Quasar，用Quasar-cli 开发，碰到一个这样的问题：如何使用图标？ 二、解决 步骤一，目前Quasar支持：Material Icons、Font Awesome、Ionicons、MDIandIcoMoon。也就是说，你只能在这几个网站里使用里面的图标，如果要自己的,emmmmmm.....在网站上传图标吧，或者,我也不会 步骤二，在...
手把手教你在vue项目中使用iconfont的Symbol
hsany330的专栏
04-12 1647
symbol 支持多色图标了，不再受单色限制。 支持像字体那样通过font-size,color来调整样式。 支持 ie9+ 可利用CSS实现动画。 减少HTTP请求。 矢量，缩放不失真 可以很精细的控制SVG图标的每一部分 symbol是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。具体相关的可以参考这篇文章：手摸手，带你优雅的使用 icon 话不多说，下面说一下具体使用的方法 1.首先你需要在iconfont里面注册一个账号，如图，里面有很多icon可以使用 2.选择你需要
vue-quasar 使用图标方法
luoliwoshang的博客
06-21 2552
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、
使用Quasar设计Material和IOS风格的响应式网站
weixin_34217711的博客
02-28 495
GITHUB：使用Quasar设计旅游网站文章链接：使用Quasar设计Material和IOS风格的响应式网站 Quasar Quasar是一款基于Vue.js开发的UI框架，可以让你轻松构建网站简洁明快的界面，更重要的是它还能让你轻松做好RWD（响应式网站设计），除此之外还能帮助你加上PWA，使你的网页变成手机上的App。 以下内容...
跨页面进行数据通讯
最新发布
榴莲不好吃的专栏
09-02 468
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
怎么在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、付费专栏及课程。

余额充值