一分钟学会在vue中使用iconfont图标集

最新推荐文章于 2024-07-13 10:40:17 发布
最新推荐文章于 2024-07-13 10:40:17 发布
阅读量1k 收藏
点赞数
分类专栏： Vue.Js_note
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30669833/article/details/81635410
版权

在iconfont中新建icon项目

  • 步骤1：加入需要的图标至购物车→点击“购物车”→点击“添加至项目”→新建项目→点击“下载至本地”（在下载前，根据喜好选择下载类型，本文选择font class）；
    这里写图片描述

    在vue中使用iconfont

  • 步骤2：将下载好的文件拷贝到vue的static文件夹下面；

  • 步骤3：将iconfont.css引入到index.html文件中（全局引入）
  • 步骤4：再需要使用字体图标的文件中使用i标签的class引用即可，如下
    <i class="iconfont icon-ziyuan5" style="color: red"></i>
    这里写图片描述
非为000
关注
专栏目录
vue中使用iconfont
m0_37714008的博客
06-15 9088
iconfont使用
5分钟搞定 Vue3+Element-Plus 项目主题色定制
chenyajundd的博客
08-11 6235
主题色是指一个网站或应用的主色调，是体现整体风格的一个重要标志。
Vue项目中引用‘阿里巴巴字体图标库iconfont’
2401_84418948的博客
04-29 585
我们看到在上面两个平台设计图中的出现了大量的图标，在某种情况下，这种图标是需要我们自己去找的，不要喷我们的 ui 哈，主要是我喜欢麻烦 哈哈，如果ui提供我也是要求他为我们提供SVG格式的，至于为什么 下面会为大家讲解。在这里呢我们遇到这种图标可能会想到我们运用的框架中的字体图标，像element-ui、iview-ui中都提供了icon图标。
如何在 Vue 项目中优雅地使用图标
最新发布
代码怪兽的技术博客
07-13 883
如何在 Vue 项目中方便易用、自动剪枝、可自定义地使用各种图标库（Material Symbols/ Material Icons），本文提供了一个实用流程。
vue如何使用iconfont
qq_35669498的博客
06-05 1294
vue如何使用iconfont
vue项目中引入iconfont
2401_84447149的博客
04-27 847
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。
vue项目中如何使用iconfont
qq_35227244的博客
05-23 1578
个人认为：在线引入的方式比较适合项目开发测试阶段，因为图标可能会有新增修改，使用在线引入的方式就不用每次UI小姐姐编辑了图标都要开发人员去下载；本地下载引入的方式适合在运行上线阶段，避免线上引入不稳定访问不了图标。
vue-amap、兼容高德原生sdk 实现多个点标记、自定义信息窗体
Superman_peng的博客
08-12 1038
vue-amap与高德原生sdk一起使用时，需要在index.html里面引入原生sdk <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"&gt
Vue、Nuxt服务端渲染，NodeJS全栈项目，面试小白的博客系统~~
小白的向往
07-26 1076
Holle，大家好，我是李白！！ 一时兴起的开源项目，到这儿就告一段落了。 这是一个入门全栈之路的小项目，从设计、前端、后端、服务端，一路狂飙的学习，发量正在欣喜若狂~~ 接触过WordPress，Hexo等第三方网站系统，虽说简单，但是感觉太过于冗余臃肿，显得过于杂乱，各种限制和体验不好等等原因。 所以决定书写一片属于自己的天地，我是创造者，也是追寻者。 前后台均为绞尽脑汁的设计，整体风格为简约风，人的心灵到达一定阶段，心思愈渐愈偏向于简单，大道极简也许才是最终的归宿。 「在线卑微，求个star htt.
Vue学习笔记
Johnzhc的博客
03-18 500
目录 一.vue基础知识 1.vue-cli创建项 二 vue资源使用总结 1.vue使用three.js知识总结 2.vue背景图为动图 3.vue使用阿里巴巴矢量库 4.vue使用Animate.css动效库 5.vue使用ElementUI 6.vue使用echarts 7.vue 使用jquery 8.vue 使用jquery supersized插件实现幻灯片的效果...
前端技术 ES6、Vue、Node.js、NPM包管理器、Babel、模块化、Webpack、vue-admin-template-master框架、服务端渲染技术NUXT
qq_45491549的博客
08-05 1446
前端技术ES6入门ECMAScript 6 简介二、基本语法Node.js一、简介二、安装NPM一、简介二、使用npm管理项目BabelWebpack一、什么是Webpack二、Webpack安装三、初始化项目四、JS打包五、CSS打包 ES6入门 ECMAScript 6 简介   ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言
iconfont图标
flyfish1216的博客
10-13 1092
什么是 iconfont iconfont就是字面上的意思，叫做“字体图标”，将一套图标集以字体文件的形式封装，并通过 CSS 的 @font-face 作为 Web Font 调用。 为什么要使用 iconfont 在互联网刚起步的时候，较多使用的是png图片，但是png图片更换起来很麻烦， 并且自适应效果很差，有时候会出现锯齿以及马赛克模糊的情况，加载起来也较慢，影响用户体验。 ico
iconfont图标在vue中的如何使用
qq_40853651的博客
07-06 468
在vue项目中使用iconfont图标
Vue 中 iconfont 使用
大灰狼的小绵羊哥哥的博客
10-16 7731
Vue 中 iconfont 使用
Ant Design of Vue Icon 图标列表
hobtdto的博客
08-06 6026
拷贝插件 yarn add vue-clipboard2 // main.js //复制到粘贴板插件 import VueClipboard from 'vue-clipboard2' VueClipboard.config.autoSetContainer = true Vue.use(VueClipboard) 图标列表 // /src/views/icons.vue <template> <div> <a-radio-group :value="t.
Vue之iconfont
c_x_m的博客
12-14 1063
由于两个地方的iconfont.css文件中的字体命名都是"iconfont"，而且样式命名也是相同的，导致问题的出现。：由于我是因为自己的iconfont的与luckysheet的iconfont冲突，所以我全局替换了。（如果没有项目，请先到 资源管理->我的项目->点击新建项目）：新建/编辑iconfont项目时，如下红框所呈现的部分，【(font family ) (前缀)(图标名称)】5.将下载到本地的zip解压，复制到项目中。2.搜索想要的图标，加入购物车。2.将引入的图标 从。
vue在列表和下拉框中显示icon图标
qq_45433217的博客
05-15 8338
vue在列表和下拉框中显示icon图标一、 在项目中引入阿里云icon图标二、 在data中定义icon图标列表三、 在下拉框中显示icon图标四、 在列表中显示icon图标 一、 在项目中引入阿里云icon图标 进入： 阿里图标官网 随便选择一个图标库 选择自己想要的图标（可以搜索） 5. 添加到购物车 6. 进入购物车，下载代码 7. 下载解压后只留以下五个文件，其他的都删了 8. 把上边五个文件拷贝到项目中src的assets文件下 9. 在main.js里面引入iconf
vue中iconfont的几种使用方式详解
jjw_zyfx的博客
03-31 844
vue中iconfont的几种使用方式详解
【Vue】icon图标使用
qq_58137891的博客
04-29 291
iconfont图标如何在vue中使用
04-01
1. 安装iconfont图标库 首先需要在iconfont官网下载需要使用的图标库，并将其导入到项目中。这里以阿里巴巴矢量图标库为例，下载完成后会得到一个名为“iconfont”的文件夹，将其复制到项目的public目录下。 2. 在main.js中引入iconfont图标库 在main.js中，我们需要引入iconfont图标库并将其挂载到Vue实例中。具体代码如下： ``` import Vue from 'vue'; import App from './App.vue'; import './public/iconfont/iconfont.css'; // 引入iconfont图标库 Vue.config.productionTip = false; new Vue({ render: h => h(App), }).$mount('#app'); ``` 3. 在vue组件中使用iconfont图标 在vue组件中使用iconfont图标需要先在html中创建一个标签，然后将需要使用的图标类名赋值给该标签的class属性。 例如，我们需要使用阿里巴巴矢量图标库中的“搜索”图标，其类名为“icon-search”，则在vue组件中使用该图标的代码如下： ``` <template> <div> <i class="iconfont icon-search"></i> </div> </template> ``` 注意，由于使用了iconfont图标库，需要将该标签设置为“i”标签。同时，需要将图标的类名添加到“class”属性中。 4. 样式调整 使用iconfont图标时，可以通过修改css样式来调整图标的大小、颜色、旋转等。 例如，要将搜索图标的大小调整为30px，颜色调整为红色，代码如下： ``` <template> <div> <i class="iconfont icon-search" style="font-size: 30px; color: red;"></i> </div> </template> ``` 通过在标签内部添加style属性，可以直接对图标进行样式调整。 以上就是在vue中使用iconfont图标的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值