如何在vue页面使用iconfont添加自定义图标

已于 2024-05-04 00:02:46 修改
阅读量50 收藏
点赞数 1
文章标签： vue.js
于 2024-03-20 16:56:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44319550/article/details/136881147
版权

首先在iconfont找到喜欢的一款图标，如图所示

4d443d1dcaf64e889d2563756110d9d5.jpeg

点击项目设置

f8fe62b75db041e9889738cc78eab2ad.jpeg

编辑成你想要的前缀

70855689de564c9b800e189a6ff37728.jpeg

点击下载

e4a80ee09faa42e7bc7dd0765cd4a94c.jpeg

选中这四个文件

e6a0d09f8a3546d78309d05f9d116f26.png

复制到项目中

8bfadbfc00b24c13a99edbcea920e632.jpeg

在main.js引用

0943fd7d8f78491fb00436416d7a3edf.jpeg

后续就可以在vue页面引用图标了

 

小酸鼠
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端常用的组件库
weixin_41618917的博客
12-06 1810
Vue2 组件库们 Element ： https://element.eleme.cn/#/zh-CN/component/select 主用于后台项目 Vant ： https://youzan.github.io/vant/#/zh-CN/ 主用于移动端项目 uView: https://v1.uviewui.com/components/grid.html 使用 uniapp 开发时 Vue3 组件库们 Element- plus: https://element-pl
element-ui el-form中的el-input自定义自动获取焦点
weixin_47541876的博客
05-11 1236
el-input自定义自动获取焦点 <el-form-item prop="username"> <el-input v-model.trim="form.username" v-focus style="margin-top: 20px" type="text" placeholder="请输入用户名"
Element-ui踩坑
Start的小笔记
05-09 1237
Element-ui踩坑 验证图片上传 其实 加上 prop就行了，再图上传成功的时候再做个图片验证取消就可以，看着麻烦其实挺简单的 <el-form ref="ruleForm" label-position="top" :model="formData" :rules="rules" > <el-row :gutter="20"> &lt
VB-icon图标大汇集，包括Windows自带图标！
09-25
VB-icon图标大汇集，包括Windows自带图标！VB-icon图标大汇集，包括Windows自带图标！VB-icon图标大汇集，包括Windows自带图标！VB-icon图标大汇集，包括Windows自带图标！VB-icon图标大汇集，包括Windows自带图标！
Vue+style 动态样式绑定（收藏图标）
fyydashen的博客
03-23 1769
主要代码： 0：未收藏 1：已收藏 <vab-icon :icon="row.is_collect == 1 ? 'star-fill' : 'star-line'" :style="{ color: row.is_collect == 1 ? 'orange' : '' }" /> 效果截图： 代码： <el-table v-loading="listLoading" :data="grouplist" border > <el-table
vue使用自定义icon图标的方法
12-11
推荐使用阿里爸爸矢量图标管理，iconfont 使用方法 登录账号，找到需要的图标加入购物车 然后添加到项目  再然后下载代码到本地 下载代码文件然后解压出现这列表 打开HTML文件，引用方法教程 补充我人的坑，...
在vue中使用阿里巴巴黑白图标和彩以图标.docx
01-13
在 Vue 项目中，使用阿里巴巴黑白图标和彩色图标可以为我们的应用程序添加视觉吸引力和丰富的用户体验。阿里巴巴图标库提供了大量的图标资源，包括黑白小图标和彩色图标，这些图标可以很方便地集成到我们的 Vue 项目...
taro-iconfont-cli:在Taro框架中使用iconfont图标，支持多端，支持多色彩，不依赖字体
05-02
在Taro框架中使用iconfont图标，不依赖字体，支持多色彩。 支持平台 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 H5 特性 1、一键生成标准组件，多端支持 2、使用方便，import即可 3、支持多色彩 4、...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在Vue.js开发中，使用Vue CLI创建的项目通常会依赖Webpack进行构建和打包。Webpack是一个模块打包工具，它能够将JavaScript、CSS、图片等资源文件转换并整合到一起，生成适合部署到生产环境的静态资源。然而，在实际...
vb icon图标大全
11-01
上百种图标供你选择 是vb编程很好的资源
1000个编程常用图标
05-09
平时开发时好难找到图标,所以将常用的,用于编程中需要用到的图标.
自定义图标工具栏
10-12
自定义图标工具栏
【Vue】npm打包报错 Syntax Error: Error: Cannot find module ‘imagemin-gifsicle‘
最新发布
weixin_47375144的博客
07-26 4345
npm run build时报错imagemin-gifsicle 模块未找到。 更换 npm node demi的版本
Vue.js项目中使用Iconfont字体图标
jimjiayu
05-08 2881
基于vue+element ui 实现商城 商品详情配置功能 封装组件
ZL3064436257的博客
12-09 2053
【代码】基于vue+element ui 实现商城 商品详情配置功能 封装组件。
Vue，js前端实现语音实时转换文字，前端实现浏览器语音实时转换为文字，vue阿里云语音转文字
热门推荐
weixin_41346436的博客
03-24 1万+
Vue，js前端实现浏览器语音实时转换文字功能详解 1.首先总结一下，前端使用实时语音需要使用到HZRecorder.js这个JS文件来实现获取浏览器麦克风话筒权限 大注意：HZRecorder.js获取话筒权限如果你在本地运行会发现正常可以使用，在发布线上不能用，那是因为线上地址不是https域名，不安全，所以浏览器默认不会给话筒权限 2.HZRecorder.js文件 ;(function (window) { //兼容 window.URL = window.URL || window.web
element-UI
weixin_49547540的博客
02-23 1376
常用组件 vue-admin里封装的组件，插件等，统一注册在framework/vab/index.js里，main.js再导入framework/vab，就可以全局使用framework/vab里的内容了 如果想全局使用自己封装的组件，可以放到vab/components里，比如多个页面需要用到的头像组件Avatar，这里有 另，也可以直接使用element-UI的组件，放在了vab/plugins里，全局的样式方法注册在framwork/plugins/vab，里面是对element-UI的一些方法重新
Vant UI中使用iconfont实现自定义图标
06-01
要在Vant UI中使用iconfont实现自定义图标，需要以下步骤： 1. 在iconfont官网上选择需要的图标，并下载对应的字体文件。 2. 将字体文件放置在项目中，通常可以在`src/assets/fonts`目录下创建一个新的子目录。 3. 在项目中引入字体文件，可以在`src/main.js`文件中使用`@font-face`来引入字体文件，例如： ```javascript @font-face { font-family: 'iconfont'; src: url('@/assets/fonts/iconfont.eot'); src: url('@/assets/fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('@/assets/fonts/iconfont.woff2') format('woff2'), url('@/assets/fonts/iconfont.woff') format('woff'), url('@/assets/fonts/iconfont.ttf') format('truetype'), url('@/assets/fonts/iconfont.svg#iconfont') format('svg'); } ``` 4. 在组件中使用`van-icon`组件来显示自定义图标，需要将`name`属性设置为`iconfont`，并将`class`属性设置为`iconfont`和对应图标的类名，例如： ```vue <template> <van-icon class="iconfont icon-email" /> </template> <script> export default { name: 'MyComponent', }; </script> <style> .iconfont { font-family: 'iconfont' !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> ``` 通过以上步骤，就可以在Vant UI中使用iconfont实现自定义图标了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值