Vue入门（九）—— 配置字体图标

阿里图标库字体图标应用指南
最新推荐文章于 2025-01-07 14:42:15 发布
原创 最新推荐文章于 2025-01-07 14:42:15 发布 · 3.3k 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文详细介绍了如何从阿里图标库下载字体图标，并在项目中进行应用的步骤：包括下载图标、设置项目目录、导入图标到main.js及具体使用方法。

1.首先需要下载字体图标，这里是阿里图标库地址https://www.iconfont.cn/
找到合适的图标下载
2.在项目目录src/assets下新建font目录，将下载好的文件放到这里
3.打开main.js导入字体图标

// 字体图标
import './assets/font/iconfont.css'

4.使用字体图标

<div class="iconfont icon-add"></div>
【Abp VNext】实战入门（五）：【13】前端管理界面 vue-element-admin —— 左侧菜单自定义图标及图标大小控制
刘永洪的博客
02-28 3656
一、前言： 使用 vue-element-admin 避免不了的是自定义左侧菜单图标以及控制图标大小，今天就记录一下如何操作。 二、操作步骤： 去阿里图标库查找需要的图标，然后下载对应的SVG文件：www.iconfont.cn 把.svg文件拷贝到项目根目录：icons/svg 在路由router/index.js 中配置新增的svg图标名：meta:{icon:‘home’} 这样处理后已经可以在左侧菜单中显示对应图标了，但是有三个问题要解决： 自定义图标太小不受控制：自定义图
【Vue】黑马Vue入门到高级实战汇总
码农印象
01-23 2311
目录v-text v-cloak计算属性computed计算属性双向绑定监听器watchClass与Style绑定v-bind条件渲染v-ifv-if 与 v-show 比较列表渲染 v-for事件处理 v-on事件修饰符按键修饰符表单数据双向绑定v-model过渡&动画效果过滤效果案例动画效果案例自定义指令MVVM设计模式绑定语法v-bindv-showv-ifv-show 和 v-if 对比 观察者模式v-for数组中响应式的方法keyv-html绑定HTML片段内容防止用户短暂看到{{}}v-
Vue｜样式绑定
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
03-21 1974
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
vue Bolb文件下载
qq_33817836的博客
09-15 337
vue下载文件
Vue基础
Mrm的博客
06-28 2943
html 超文本标记语言(HyperText Mark-up Language) html元素：块元素标签（行元素）和内联元素标签（行内元素） 块元素独占一行，块元素之后需要换行； 例如：标题标签，段落标签，通用块容器标签。 内联元素可以排列在一行，设置宽高无效，快高由内容撑开（特殊除外）。 例如：超链接标签，图片标签（支持宽高） html注释： css注释：/* */ js注释：// css引入方式：内联式（行内样式）、嵌入式（头标签中）、外链式 css选择器：标签选择器、类选择器、id选择器、
Vue中点击url下载文件-案例
JackieDYH的博客
04-19 4682
封装自定义指令 将url转成bold,在创建a标签下载blob 代码实现 在src 下面的 directive 文件夹下新建目录downLoadUrl downLoadUrl / index.js文件 /* * 后端返回文件的url,前端创建a标签来下载 * * 1. 解决了若文件为图片或浏览器支持的格式类型,点击下载会直接打开文件的问题, * 2. 下载文件时,浏览器会有闪动的问题 * * 页面内使用 * 1. 引入指令 import downLoad from '..
vue-bold:多样的Vue应用
03-27
Vue-Bold 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。 api方法：“ get”，网址：baseUrl +“ / packages / id” + id，
基于 Vue 3 的企业级前端设计语言和 React 组件库——arco.design
qq_41186565的博客
08-12 1158
Arco Design 是一个基于 Vue 3 的前端设计语言和组件库，旨在提供一套简单易用、高效稳定的前端解决方案。本文将介绍如何安装、使用 Arco Design 以及如何定制主题和设计规范。Arco Design 不仅提供组件库，还提供了一套设计规范。这些规范可以帮助你创建符合 Arco Design 风格的设计。Arco Design 提供了主题定制功能，你可以通过修改主题文件来改变组件的颜色、字体等样式。
基于webpack4的Vue项目打包配置详解
从描述来看，该项目是一个面向初学者或中小型项目的入门级 Webpack 配置方案，强调“简单明了”，适合用于理解 Webpack 如何与 Vue 结合工作。配套教程链接指向简书文章，说明作者希望通过图文并茂的方式引导读者一...
UniApp 入门1：创建一个空白 Vue2 项目
最新发布
m0_74331272的博客
01-07 1255
pages/- 页面文件夹，所有页面放这里。static/- 静态资源，图片、字体等静态文件放这里。App.vue- 根组件，管理应用的整体结构。main.js- 主入口文件，初始化应用。- 项目配置文件，定义应用名字、权限等。pages.json- 路由导航，管理页面跳转和标题。希望这个简单的目录解析能让你快速上手 UniApp！🎉下一步要做什么？👉 运行项目，修改首页内容，让页面活起来吧！💻别忘了多试试 UniApp 的特色功能，比如一键发布多端。😆🎊。
项目总结-关于字体加粗问题
时清云的博客
07-15 1万+
近期，在开发一个h5页面的时候遇到了这样一个关于文字加粗的问题，我设置了 <p style=“font-weight :600;”>100万代金卷</p> 结果在安卓手机上 100加粗了，‘万代金卷’却没有变化，ios手机上都是加粗的。why？ 难道还存在兼容性问题？ ...
uniapp vue 下载bold流乱码下载xlsx乱码
qq_42148925的博客
05-25 1189
uni.request({ url: '/api/coursePunch/export?courseId=' + _this.tableData.courseId, method: "GET", responseType:"arraybuffer", header: { "Accept": 'application/vnd.ms-excel;charset=utf-8', "Content-type": 'application/vnd.ms.
vue 项目中引入字体文件的正确方式~
娃哈哈_的博客
10-21 7410
文章目录前言一、开发中需要什么样的字体1. 字体图标2. 特殊字体二、项目中引入字体文件1. 字体文件2. css文件3. 项目使用该字体总结 前言 在UI设计稿中，可能会有一些特殊字体，或者是一些字体图标。对于特殊字体，大多数用户本地电脑是没有安装该字体的字体包的。 为了能够让漂亮特殊的字体能展示在用户PC电脑上，我们通常需要把【字体包文件】植入项目中。它们通常是这样的格式文件：.otf | .woff | .ttf | 格式文件。 一、开发中需要什么样的字体 1. 字体图标 推荐一个比较大而全的字体
vue项目字体设置
weixin_42667381的博客
05-20 4008
导入字体文件，以pingfang.ttf为例 设置font.css @charset "UTF-8"; @font-face { font-family: "pinfang"; src: url("font/pinfang.ttf") format("truetype"); } 在全局使用 public.css： @import ‘font.css’; main.js : import ‘@/assets/css/public.css’ ...
Vue项目中引入字体图标（详细讲解）
weixin_41432139的博客
07-17 4052
Vue项目中引入字体图标（详细讲解）
vue项目中使用字体图标（iconfont）
云帆的博客
05-10 2860
前言 element-ui中的字体图标非常好用，那么如何在项目中使用自定义字体图标呢 步骤 进入iconfont官网，登录/注册一个账号； 搜索你想要的图标，并且加入到购物车； 顶部的购物车图标会显示当前库存数量，已入库的图标会显示虚线边框； 点击顶部购物车图标，在点击添加到项目； 如果还没有创建过项目，可以点击“+"按钮新增； 添加到项目后，进入项目详情； 一般选择font class模式，图标下方显示图标的font class名称； 进入项目设置，修改字
vuejs搭建的项目如何引入图标字体
热门推荐
milli236的博客
09-06 1万+
引入阿里的icon库； 1.所选择的字体图标下载代码包， 2.代码包里除掉demo文件，其他拷贝到vue项目里，自建一个icon文件目录 3.所引用的组件页面导入iconfont.css文件 @import "../../../assets/icon/iconfont.css"; ... 4页面：页面中添加一个i标签 class填入iconfont icon-xxx即可，
在vue项目中(本地)使用iconfont字体图标的三种方式
艾欢欢的博客
05-06 8636
使用前的准备和三种使用方式介绍，参考这里 开始使用： 点击下载到本地 在了路径 src/assets 下新建文件夹 iconfont ，用来存放字体图标的本地文件 解压下载到本地的字体图标文件，放到 iconfont 文件夹下 如过项目中没有下载 css-loader 依赖包，就进行下载，否则会报错 npm install css-loader -D 然后在 main.js...
2.Vue自定义配置,引入字体图标,定义调用组件,路由高亮,配置导航,实现轮播图,
zhangshengqiang168的博客
07-28 460
1.根目录下新建vue.config.js文件,添加如下配置,更多配置请参考文档 2.引入字体图标 1.查看字体图片class 2.字体前面添加引入字体图片 3.在main.js中引入字体图标css文件 4.效果对比 3.定义组件 ,调用组件 目标:定义底部导航组件,并调用 1.新建一个vue组件,拷贝底部导航div到新vue文件中,并配置导出 2.引入组件并使用组件 4.添加路由的样式,使路由导航页高亮显示 1.路由linkAc...
基于Vue的中国象棋前端项目入门实践
CSS负责视觉呈现，包括布局（如flex或grid实现棋盘对齐）、动画（如棋子移动过渡效果）、主题风格（红黑配色、字体图标）等；而JavaScript则是行为控制的核心，配合Vue框架完成逻辑处理。Vue作为渐进式JavaScript...
评论 7
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

什么都干的派森

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

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

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

打赏作者

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

抵扣说明：

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

余额充值