引入阿里iconfont 图标

首先我们打开 iconfont官网，注册登录之后点击导航栏上的图标管理 — 我的项目：

进入项目之后，点击新建项目

随便添加一个图标到新建好的项目中，并且生成 CSS 静态资源，如下所示：

将 CSS 静态资源添加至项目 public 文件夹下的 index.html 文件，代码如下：

<!DOCTYPE html>
<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"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title><link rel="stylesheet" href="//at.alicdn.com/t/font_3303396_g0v4bk6t71m.css"></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

在src/views/Home.vue将图标引入

<template><div id="home" class="home"><div><i class="iconfont iconjiaju-02"></i></div></div>
</template><script>
export default {name: "Home",components: {},
};
</script><style lang="less" scoped>
.home {div {// background: darkblue;width: 200px;height: 200px;font-size: 18px;i {}}
}
</style>

运行项目:

vue项目集成iconfont 图标相关推荐

vue项目中阿里图标的使用
vue项目中阿里图标的使用在项目中使用阿里图标,先去阿里图标网站(https://www.iconfont.cn/),找到自己想要的图标,添加到一个新建项目中,然后选择Font class,点击下载 ...
VUE如何引入iconfont图标来使用
对做前端界面的开发者来说,做各类界面的时候需要用到图标,这里说下如何在VUE中引用iconfont图标来使用,以引入阿里的iconfont图标为例. 一.首先访问https://www.iconfon ...
UNI-APP/VUE 项目集成微信SDK /微信开放标签教程和避坑指南（下）——微信开放标签篇
UNI-APP/VUE 项目集成微信开放标签教程和避坑指南文章同步发布于
vue项目集成乾坤(qiankun)微前端
vue项目集成qiankun微前端集成乾坤微前端主应用: 1.安装 2.main.js中进行配置 3.配置路由 4.将主应用路由模式设置为history模式子应用中配置(子应用无需安装乾坤) 1. ...
UNI-APP/VUE 项目集成微信SDK /微信开放标签教程和避坑指南
UNI-APP/VUE 项目集成微信SDK教程和避坑指南文章同步发布于
Vue项目引入icon图标的两种方法
我用的是阿里巴巴矢量图标库 ****一,在文件中引入icon项目链接将图标加入项目后会出一个链接(每新添加图标,此链接都应更新) 在Vue项目中,public/index.html中将项目链接复制 ...
vue引入阿里巴巴iconfont图标(简单易懂)
vue引入并使用阿里巴巴iconfont图标流程为什么要使用阿里图标库: 有些时候你需要的图标是真的在elementul里没有的或者完全不适合的. 这时候我们需要去到阿里的图标库里找找,这里的图标非 ...
vue项目使用iconfont（本地下载、彩色icon）
一.vue-element-admin项目使用iconfont(页面+菜单) 1.iconfont下载资源到本地 2.将下好的文件取这5个放在项目assets文件夹里 3.查看iconfont.css ...
vue项目引入icon图标
项目图标的说明当前项目在开发过程中,使用到了iconfont的图标,对应的图标预览地址如下: iconfont Demo 对于开发者来说,一般可以不关心它的存在,因为他并不影响你使用其他的iconf ...

vue项目集成iconfont 图标

引入阿里iconfont 图标

vue项目集成iconfont 图标相关推荐

最新文章

热门文章