Vue调用阿里Iconfont图标库的在线方法
版权申诉
117 浏览量
更新于2024-08-20
收藏 18KB DOCX 举报
"Vue.js 调用阿里 Iconfont 图标库在线方法"
在前端开发中，使用图标是一项常见的任务，阿里Iconfont图标库提供了一个丰富的图标资源库，方便开发者在线选择并集成到项目中。本文主要讲解如何在Vue.js项目中通过在线方式调用阿里Iconfont图标库，避免了手动下载图标文件的繁琐步骤，实现动态加载和更新图标。
首先，我们需要访问阿里Iconfont的官方网站（Iconfont），在这个平台上，你可以浏览并选择适合项目需求的图标。将选中的图标添加到个人项目中，然后生成项目的CSS链接。这个链接是调用图标的关键，即使删除项目，只要这个链接存在，项目仍然能显示图标，但不清楚链接的有效期。
接下来，我们将在Vue项目中使用这个链接。在HTML的`<head>`部分，引入生成的CSS链接，如下所示：
```html
<link rel="stylesheet" href="//at.alicdn.com/t/font_2872687_x5kgx7w5eth.css" rel="external nofollow">
```
在Vue组件中，可以直接使用CSS类名来展示图标。例如，如果图标类名为`icon-3column`，则可以在模板中这样使用：
```html
<i class="iconfont icon-3column"></i>
```
这样做之后，你应该能在页面上看到所选的图标。
为了在Vue项目中更优雅地管理这些CSS引入，可以编写一个工具函数，动态加载CSS链接。以下是一个简单的示例：
```javascript
// 动态插入css
export const loadStyle = (url) => {
const link = document.createElement('link');
link.href = url;
link.rel = 'stylesheet';
document.head.appendChild(link);
};
```
在Vue组件的`mounted`生命周期钩子中调用这个函数，确保在页面渲染时加载图标样式：
```javascript
export default {
mounted() {
loadStyle('//at.alicdn.com/t/font_2872687_x5kgx7w5eth.css');
},
};
```
这样，图标就能在Vue组件中正常显示了。在线调用阿里Iconfont图标库的优点在于，当库中有新的图标更新时，只需更新链接，项目中的图标就会自动更新，无需重新下载或导入文件。
总结，通过以上步骤，我们可以轻松地在Vue项目中使用阿里Iconfont图标库，实现图标库的在线调用和动态加载，提高开发效率，同时保持图标库的及时更新。这种方法不仅适用于Vue，也可以应用于其他前端框架，如React或Angular，只需要相应地调整引入CSS链接的方式即可。
1
VUE 在线调用阿里 Iconfont 图标库的方法
前言
多年前我本是个服务端小白，随着行业内卷，硬是被熬
成了前端小白。。。开个玩笑，只是个人比较喜欢学习技术罢
了 ！ 本 章 将 带 领 大 家 以 另 一 个 高 端 的 方 式 打 开 阿 里
Iconfont 图标库，过去，我们要么是自己在网上费好大劲，
东拼西凑的找一些 icon 的图片，来美化我们的网页，然而
随着技术的发展，和一些大平台的技术奉献，这里不得不说
阿里还是牛逼，这里不是夸它，给它打广告，确实，人家在
一些领域做的比某腾要好，可能也和领域有关吧，受我个人
认知水平问题，我也只能这么认为，比如在我门 JAVA 服务
端方向，阿里有 Nacos、Canal、RocketMQ、Dubbo、Sentinel
等一些开源技术。回归正题。看标题本章内容是围绕 VUE 前
端和阿里 Iconfont 图标库展开的，经历了从网站上东拼西
凑 图 标 的 时 代 ， 大 概 是 15~16 年 左 右 我 开 始 解 除 阿 里
Iconfont 图标库，刚开始就只会下载图标使用，如下
这种直接就是下载的图片，还是比较 lol，后面随着前
端技术的学习，直到写 uniapp 的时候，开始学会使用图标
文件应用
这种如果频繁更改的图标那么也需要频繁从新下载图
下载后可阅读完整内容，剩余6页未读，立即下载
点击了解资源详情
点击了解资源详情
点击了解资源详情
202 浏览量
121 浏览量
119 浏览量
107 浏览量
175 浏览量
2021-12-29 上传
mmoo_python
- 粉丝: 7425
- 资源: 1万+
我的内容管理
展开
最新资源
- PJBlog2 qihh
- TodoRestApi：待办事项其余应用程序的服务器端
- spread:SPREAD 移动前景中的所有图形并尝试以愉快的方式排列它们。-matlab开发
- SeleniumDemo:Selenium自动化框架模板
- For-While
- kaggle dataset: publicassistance-数据集
- PHPWind论坛 prettyshow
- multitranslator
- 使用CNN的OCR韩语辅助应用程序
- SwiftUI仿表格效果完成代码
- Impermalink:用于创建缩短的，即将到期的链接的工具
- anime-sync
- Arduino-基于Web的MP3播放器-项目开发
- 预算跟踪器：使用503020方法的简单预算跟踪器
- TITUNI:Tituni - 标题程序。 还在测试中。-matlab开发
- BBSxp论坛 蓝语风格
