在vue项目中使用第三方的字体图标库

最新推荐文章于 2025-09-27 18:46:52 发布
原创 最新推荐文章于 2025-09-27 18:46:52 发布 · 1.4k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue #icons

本文详细介绍了如何在Vue项目中使用阿里字体图标库。首先，访问官方网址选择需要的图标，然后将图标添加到项目并下载到本地。接着，在项目入口文件main.js中导入图标库，并在组件中引用所需的类名来显示图标。通过这些步骤，可以在Vue应用中成功引入并使用第三方字体图标。
如何在vue项目中使用第三方的字体图标库

以在vue项目中导入阿里字体图标库为例

1、打开阿里字体图标库的官方网址
https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a

请添加图片描述
2、选择自己需要的字体图标，下面做演示
请添加图片描述

3、选择自己需要的字体图标
请添加图片描述

4、加入购物车
请添加图片描述
5、查看自己加入购物车的图标请添加图片描述
6、添加到项目
请添加图片描述
7、创建到项目
请添加图片描述
8、添加到自己的项目中
请添加图片描述

9、下载到本地
请添加图片描述

10、保存到本地
请添加图片描述
11、解压压缩包
在这里插入图片描述
12、将解压过的文件夹复制到自己所需要的文件夹中，这里复制到我的项目中，不同的项目自行选择
请添加图片描述
13、先在项目的入口文件 main.js 中导入字体图标库
请添加图片描述
14、查看所需要的类名
请添加图片描述
15、把icon图标引入到项目中
请添加图片描述
16、在需要引用字体图标的组件中引用字体图标
请添加图片描述
17、效果
请添加图片描述

《Vue3笔记》第11节：Vue3项目引入Font Awesome图标库
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
12-30 300
这篇文章还是基于之前的代码之上，介绍Vue3项目中如何引入第三方的图标库。前一个小节介绍了如何引入中的图标库，但是中的图标很少，有可能不满足我们的需求，这个时候就需要使用第三方的图标库，这个小节介绍如何引入图标库。是一个第三方提供的图标库，v5版本提供了1820个图标，可以覆盖大部分的图标使用场景了，可以去官网查看有哪些图标。
vue中引入第三方字体文件的方法示例
10-17
主要介绍了vue中引入第三方字体文件的方法示例，文中讲述了实现方法及其错误的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue 第三方字体图标引入 Font Awesome的方法
12-10
Font Awesome 用过Bootstrap字体图符的小伙伴肯定很熟悉字体图符的便利，不管是在加载还是修改方面，字体图符远远优于图片。但是饿了吗封装的Element UI提供的字体图符少之又少，又不想用图片，只能自己扩展图符咯。 Font Awesome 提供了675个可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。还有很多优点不一一举例，可自行查看文档：http://fontawesome.dashgame.com/ npm 安装 font-awesome npm install font-awesome --save-de
vue项目引入字体
最新发布
ioncannontic的博客
09-27 342
前端引入字体
『VUE』vue 引入Font Awesome图标库（详细图文注释）
MZH
03-11 840
我一般是中文网搜索找到图标的英文名然后去官方网站搜索官方网站(英文名搜索)中文搜索图标大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！发现你走远了@mzh原创作品，转载必须标注原文链接欢迎关注『VUE』 专栏，持续更新中欢迎关注『VUE』 专栏，持续更新中『未完待续』
vue中引入第三方字体
u014713031的博客
03-16 1521
  在实际开发中，默认字体无法满足我们的需求，这时候就需要依赖第三方字体库，这里推荐一个我使用的字体库：fonts2U。 1、下载一个字体包，一般包含如下文件 多种格式的文件是为了适配不同浏览器环境 2、配置stylesheet文件，一般下载下来的已经配置好了，自己如果有特殊需要可以修改 @font-face { font-family: "Curvic"; src: url("...
Vue引入第三方字体
明知山
05-16 746
【代码】Vue引入第三方字体。
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
在Vue.js项目中集成ElementUI和第三方图标库iconfont的示例主要涉及几个关键步骤。首先，要选择一个图标库，本例中使用的是阿里巴巴的iconfont图标库。其次是将所需图标添加到项目中，并进行一些必要的配置，包括...
uniapp字体图标的使用
12-31
在uniapp中，我们可以借助第三方字体库如Ionicons、FontAwesome或者自定义的字体库来引入这些图标。 二、引入字体图标库 1. 安装字体库：首先，你需要选择一个字体图标库，例如Ionicons，通过npm命令行工具进行安装...
vue如何使用第三方字体
babywenever的博客
08-29 550
阿里的是免费的，但是字体比较少。在src/assets/fonts中添加woff文件，新建fonts.css文件，引入字体。这里的font-family是自定义的字体名字，在css中可以直接使用。在main.js中引入fonts.css。
Vue3 如何引入第三方字体
HaushoLin的博客
12-02 6079
本次采用的免费字体是阿里巴巴的iconfont，商用免费的，废话不多说，开始今天的教程。
Vue3引用外部TTF字体，其实很简单！
m0_51390969的博客
12-09 2847
就是你自定义字体的名字。
vue项目中使用字体图标（iconfont）
云帆的博客
05-10 2853
前言 element-ui中的字体图标非常好用，那么如何在项目中使用自定义字体图标呢 步骤 进入iconfont官网，登录/注册一个账号； 搜索你想要的图标，并且加入到购物车； 顶部的购物车图标会显示当前库存数量，已入库的图标会显示虚线边框； 点击顶部购物车图标，在点击添加到项目； 如果还没有创建过项目，可以点击“+"按钮新增； 添加到项目后，进入项目详情； 一般选择font class模式，图标下方显示图标的font class名称； 进入项目设置，修改字
梳理详细 vue中引入第三方字体图标库iconfont
feiyu_may的博客
04-25 2568
最近在项目中需要使用第三方图标库，我选择了阿里的iconfont。记录下学习过程。在网上查阅资料的时候，发现很多教程写的比较模糊，一些博主只是提供一种可实现的方式，但是并没有完全区分iconfont的几种引入方式及对应文件的作用，我一开始是有点混淆的，所以自己做了实践总结。 目录 1、在Iconfont网页上建立自己的项目 2、选择图标加入购物车 3、Vue工程中引入iconfon...
Vue设置全局设置第三方字体
qq_38157433的博客
02-19 983
【代码】Vue设置全局设置第三方字体。
Vue3巧用iconfont字体图标库（建议收藏）
爱勇宝
02-05 4999
最近在开发项目中研究了一下阿里妈妈出品的阿里iconfont矢量图标库。看完之后只想说一句，妈妈再也不用担心我的网站找不到图标啦~
vue项目中引入字体图标库（傻瓜式教程，详解）
逆水行舟 不进则退
04-02 5048
在vue项目中使用字体图标库，完整版详细步骤
vue项目中引入阿里图标iconfont
moandaylab
01-30 1172
vue如何在创建好的项目中引入阿里图标iconfont呢，涉及到以下几个步骤： **1、首先先到阿里图标官方网站https://www.iconfont.cn/，任意选择几个图标加入购物车 2、加入购物车后，点击页面最右上方的“购物车”按钮，之后点击“添加至项目”，添加完成之后，到我的项目中查看，同时点击“下载到本地”**进行下载。 3、下载完成后，接下来是引入vue项目中。创建完vue项目之后，项目目录如下： 4、在assets中创建目录名为iconfont的目录，创建完成后，将刚刚第二步下载后的9
在vue项目中引入阿里图标库小记
weixin_30254435的博客
08-10 270
使用Vue技术栈开发不仅效率高，而且很友好，而且还有很多基于vue的UI框架，例如：element等，但是这类框架美中不足的是，图标太少。为了解决这个问题，不得不引入第三方字体库，今天以阿里图标库为例，如何在vue中使用。 1、首先找到合适图标，然后点击添加入库，接着点击右上角的购物车图标。 2、你刚才选择的图标就能在侧边栏看到了，选择要加入的项目（提前建好的项目），点击确定。 ...
vue3 如何替换第三方组件已使用iconfont图标
12-27
### Vue3 中替换第三方组件使用的 Iconfont 图标 在 Vue3 项目中，为了替换第三方组件所使用的 Iconfont 图标，可以遵循以下方法： #### 准备工作 确保已经注册并登录到阿里云的 [Iconfont](https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a)[^3] 平台，并创建了一个属于自己的图标库。 #### 安装依赖包 安装 `@ant-design/icons-vue` 或者其他支持自定义图标的 UI 库作为辅助工具来加载 Iconfont 字体文件。如果使用的是 Element Plus，则不需要额外安装此插件，因为它本身提供了对 SVG 的良好支持[^2]。 #### 配置 Webpack Loader (针对非 Vite 用户) 对于基于 Webpack 构建的应用程序，在 webpack.config.js 文件内配置 svg-sprite-loader 来处理 .svg 文件： ```javascript module.exports = { module: { rules: [ // ... other loaders ... { test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/assets/icons')], options: { symbolId: 'icon-[name]' } }, // 处理 iconfont css 文件中的 url 路径问题 { test: /\.css$/, use: ['style-loader', 'css-loader?url=false'] } ] } }; ``` #### 加载 Iconfont CSS 文件 通过 `<link>` 标签直接引入在线版 Iconfont CSS 地址至 HTML 文档头部；也可以下载本地存储后再按需导入。 ```html <!-- Online --> <link rel="stylesheet" href="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css"> <!-- Local --> <style> @import './assets/iconfont/iconfont.css'; </style> ``` #### 修改 Third-party Component 使用方式 当目标是修改像 Element Plus 这样的第三方框架内的按钮样式时，可以通过覆盖默认 slot 属性来自定义内部显示的内容。例如要改变 el-button 组件里的图标，可按照如下方式进行调整： ```vue <template> <!-- 原生写法 --> <el-button :icon="'iconfont icon-' + iconName"></el-button> <!-- 更推荐的方式：利用具名slot传递子元素 --> <el-button> <span class="iconfont icon-gouwuche"></span>购物车 </el-button> </template> <script setup lang="ts"> // 如果需要动态设置图标名称的话 const props = defineProps<{ iconName?: string; }>(); </script> ``` 以上就是在 Vue3 项目里更换第三方组件上原本自带的图标为 Iconfont 自定义图标的完整流程说明。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值