vue使用第三方icon的步骤

最新推荐文章于 2024-07-31 10:50:54 发布
原创 最新推荐文章于 2024-07-31 10:50:54 发布 · 634 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍如何在项目中使用阿里的iconfont图标资源。从注册账号、创建项目、选择图标，到本地下载、配置样式、引入图标，一步步教你轻松上手。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.https://www.iconfont.cn/打开阿里的iconfont官网，注册并创建一个项目

 2.选择需要的图库加入购物车，选择font class后下载到本地

3.打开iconfont.css 添加如下配置

[class^="icon-vehicle"],
[class*=" icon-vehicle"]/*这里有空格*/
 {
  font-family: "iconfont" !important;

  font-size: 16px;

  font-style: normal;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

4.把所有文件负责到自己的项目assets下新建个icon文件

6.mian.js引入样式

7.页面引入图标

8.重启项目

新建vue项目和安装第三方库
xiaobai_cpp的博客
07-19 722
vue安装Element plus，图标库，路由插件，布局插件
在vue项目中使用Jquery-contextmenu插件的步骤讲解
12-10
在Vue项目中集成jQuery-contextmenu插件，...此外，对于现代前端框架来说，虽然jQuery提供了一种便捷的解决方案，但Vue等框架原生的事件系统和组件化思想也提供了强大的功能，可以根据项目需求权衡是否引入第三方库。
vue项目中引入阿里图标iconfont
moandaylab
01-30 1071
vue如何在创建好的项目中引入阿里图标iconfont呢，涉及到以下几个步骤： **1、首先先到阿里图标官方网站https://www.iconfont.cn/，任意选择几个图标加入购物车 2、加入购物车后，点击页面最右上方的“购物车”按钮，之后点击“添加至项目”，添加完成之后，到我的项目中查看，同时点击“下载到本地”**进行下载。 3、下载完成后，接下来是引入vue项目中。创建完vue项目之后，项目目录如下： 4、在assets中创建目录名为iconfont的目录，创建完成后，将刚刚第二步下载后的9
Vue + Element UI 前端篇（十一）：第三方图标库
y19910825的博客
09-05 2043
用过Elment的同鞋都知道，Element UI提供的字体图符少之又少，实在是不够用啊，幸好现在有不少丰富的第三方图标库可用，引入也不会很麻烦。Font Awesome 5 跟之前的版本使用方式差别较大，功能是强大了，图标也更丰富了，但使用也变得更加复杂了。进入图标库选择自己喜欢的图标加入购物车，因为没有批量加入，一个个点简直要命，在控制台输入以下命令可以批量添加。本人还是比较喜欢之前的使用方式，安装容易，使用简单，毕竟我的需求也没那么复杂，只是简单的有图标可用就行了。
Vue添加第三方iconfont图标库
shirukai
07-26 1万+
Vue添加第三方iconfont图标库 一、图标包制作 我们需要到iconfont选择图标，然后下载到本地。 iconfont官网：http://www.iconfont.cn/ 下面以导入官方提供的【AIS产品图标库】为例 1.登录到iconfont 2.选择图标库 在导航栏点击【图标库】然后选择【官方图标库】 这时候我们会看到官方图标库，我们找到【AIS产品...
[vue]Vue Element使用第三方icon图标教程详解
lingrer的博客
07-31 899
将以下代码加进去，注意： el-icon-third 是你之前设置的icon前缀，第二个 el-icon-third前边有空格的。前缀注意，不要跟element-ui自带的icon(前缀为：el-icon)重名了。在src下的assets下新建一个icon文件夹，将下载的所有文件都复制粘贴。解压后你会得到这些文件，打开iconfont.css。选择 Font class 下载至本地。复制代码可获得一个class类名。在购物车当中选择添加至项目。在main.js当中引入。
vue中使用remixicon
weixin_69518525的博客
05-11 1722
vue中使用remix icon
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
在Vue.js项目中集成ElementUI和第三方图标库iconfont的示例主要涉及几个关键步骤。首先，要选择一个图标库，本例中使用的是阿里巴巴的iconfont图标库。其次是将所需图标添加到项目中，并进行一些必要的配置，包括...
vue element项目引入icon图标的方法
08-27
因此，引入第三方图标库成了必然的选择。 阿里巴巴图标库 阿里巴巴图标库是中国最大的图标库，提供了丰富的图标资源。开发者可以注册阿里巴巴账号，搜索需要的图标，添加到购物车，然后点击添加到项目。如果没有...
Vue项目中使用element-ui，并引入第三方图标库iconfont
热门推荐
sleepwalker_1992的专栏
09-23 2万+
element-ui官网 1、安装 npm install element-ui --save-dev 2、在main.js文件中引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 3、上面两步完成后，就可以在项目任意的组件中...
vue element-ui引入第三方图标
Toozky的博客
03-09 2668
参考链接Vue Element使用icon图标(第三方) - 简书 项目vue版本为vue3，按照上文重新整理的笔记 打开iconfont-阿里巴巴矢量图标库，注册登录之后回到首页 在首页顶部菜单 图标管理>我的项目 点击新建项目 新建项目 项目名称随意 记住设置的前缀，一会儿要用 去图标库里搜索选择自己需要的图标 加入到购物车 点击菜单栏上的购物车 添加至项目 选择刚才创建的项目 点击确定 跳转至项目页 点击Font class 鼠标箭头放到图标上可以更改名称 下载到本地，解压 编辑ico
在iview + vue项目中使用自定义icon图标
lianwenxiu的博客
05-13 1万+
最近做一个后台管理系统，是用iview+vue cli2做的，在做的过程中需要将左侧的导航栏加入icon图标，但是iview库里的图标和UI要求不符，这就需要引入自己的图标库。 1. UI设计师会把自己做的图标库上传到阿里巴巴图标库，打开设计师给的图标库地址，把所有要用到的图标点击加入购物车 2. 到购物车中点击添加至项目 3. 给项目起个名字，点击确定，...
解决iview菜单使用iconfont图标无法显示的问题
lvdou1120101985的博客
09-28 2万+
写在前面： 首先，我出现问题的场景是使用在导航菜单上，即 Menu Item； 其次，我是使用json文件递归生成的菜单列表，在meta属性中设置的icon；   今天在使用iconfont的图标作为菜单的图标时发现总是显示成方框框 使用方法和设置Button的图标是一样的，检查了好久也没有发现问题，百思不得其解…… 使用F12检查元素，发现原来框架是在样式前面加上了 iv...
cdn引入的iview UI框架——自定义icon（iconfont）
m0_52309519的博客
03-13 780
cdn引入的iview自定义icon（iconfont）
iview中icon不能显示的问题
qq_39865491的博客
10-26 2万+
当代码中引入自定义的icon时,iview中原来的icon就不能显示出来了 这是因为引入了自定义的icon,使得icon的格式发生了变化 在iview的icon前面加上ivu-icon-,完美解决 ...
梳理详细 vue中引入第三方字体图标库iconfont
feiyu_may的博客
04-25 2527
最近在项目中需要使用第三方图标库，我选择了阿里的iconfont。记录下学习过程。在网上查阅资料的时候，发现很多教程写的比较模糊，一些博主只是提供一种可实现的方式，但是并没有完全区分iconfont的几种引入方式及对应文件的作用，我一开始是有点混淆的，所以自己做了实践总结。 目录 1、在Iconfont网页上建立自己的项目 2、选择图标加入购物车 3、Vue工程中引入iconfon...
vue/cli ,element 引入第三方图标
qq_37377082的博客
12-30 256
访问第三方图标网站 推荐 ：阿里巴巴矢量图标库（ https://www.iconfont.cn/ ） 这里使用的也是阿里巴巴矢量图标图 创建 图标库网站账户并登录 这里账户已经创建，并登录成功 在图标库网站内创建项目 在图标库搜索图标，添加到购物车 把购物图标添加到项目，并下载 解压下载文件，并拷贝到项目里 修改iconfont.css 添加的内容 .iconfont { font-family: "iconfont" !important; font-size: 16p
Vue项目引入icon图标的两种方法
绿色水杯的博客
12-06 1万+
我用的是阿里巴巴矢量图标库 ****一，在文件中引入icon项目链接 将图标加入项目后会出一个链接（每新添加图标，此链接都应更新） 在Vue项目中，public/index.html中 将项目链接复制在link中即可 二，icon项目下载使用 将下载的项目解压，复制到Vue项目中的assets文件中 如，assets/iconfont/font 然后在main.js文件中引入 //引入图标 import './assets/iconfont/font/iconfont.css' 最终引入的是icon
vue3第三方表格组件的图标替换修改
最新发布
12-19
在 Vue3 中，如果使用第三方表格组件（如 Element UI 的 el-table 或者 Vuetify 的 v-data-table 等），替换表格列头的图标通常涉及以下几个步骤： 1. **引入组件库**: 首先需要将所选的表格组件及其图标库（比如 Ant Design、Element Plus 等）引入到项目中。 2. **获取列配置**: 查看该组件的文档，找到如何动态配置列头的部分。这通常是通过列对象（column definition）来指定每个列的内容，包括标题和图标等属性。 3. **替换图标**: - 使用 `slot` 或者直接在列对象的配置里设置 `icon` 属性，如果是 Element UI，可以使用 `el-icon` 标签； - 如果是自定义图标，可以使用字符串路径（例如 `'@/assets/icon/search.svg'`）引用相对路径下的SVG文件，然后设置 `v-bind:class` 来根据需要切换样式； - 对于某些支持图标懒加载或动态更换的组件，可能还需要配合使用 `v-if` 或 `v-show` 来控制何时显示替换图标。 4. **更新数据或响应式处理**: 如果图标依赖于数据状态，确保你在适当的时候更新列配置，以便及时反映到视图上。 5. **示例代码**: ```javascript <template> <el-table :data="tableData" :columns="columns"> <!-- ... --> <template slot="header cell" slot-scope="{ column, $index }"> <span v-if="column.field === 'yourColumnField'">{{ column.label }}<el-icon type="yourIconName"></el-icon></span> <!-- 或者如果你有动态数据源 --> <template v-if="column.iconType"> <img :src="'@/assets/icons/' + column.iconType" /> </template> </template> <!-- ... --> </el-table> </template> <script> export default { data() { return { tableData: [], columns: [ // ... { field: 'yourColumnField', label: 'Your Column', icon: 'search' }, // ... ], }; } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

爱编程的阿牛

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

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

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

打赏作者

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

抵扣说明：

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

余额充值