Webpack项目中引入IconFont图标

本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标。

IconFont官网：https://www.iconfont.cn/

1、打开IconFont官网并登陆自己的账户。

2、挑选你喜欢的图标，添加入库。

3、进入购物车查看已挑选的图标，下载代码。

4、将下载后的图标代码解压，文件如下。

5、将解压文件复制到项目的 src/assets 目录下。

6、在 App.vue 中引入 iconfont.css 。

<template><div id="app"><router-view/></div>
</template><script>
// 全局引入 IconFont
import "./assets/iconfont/iconfont.css"
export default {name: 'App'
}
</script><style type="text/css">
#app{height: 100%;
}
</style>

7、如何使用IconFont图标。

在图标代码的解压目录中有一个 demo_index.html 文件，其中包含了所下载的图标用法示例，提供了 Unicode 、Font class、Symbol 三种方式使用图标。

Font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

例如，在element按钮中使用上面的调试图标：

      <div class="el-button el-button--default el-button--small" @click="tiaoshi"><i id="collapsedIcon" class="iconfont icon-icon_tiaoshi"></i></div>

效果如下：

Webpack项目中引入IconFont图标相关推荐

uniapp项目中引入iconfont图标
在项目中,难免出现图标不满足我们需求的情况,我们可以去阿里图标库(iconfont-阿里巴巴矢量图标库)选择我们满意的图标. 最近在做uniapp的项目,记录一下引入iconfont的步骤 1.去官网 ...
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式
项目中引入阿里巴巴图标--iconfont图标的使用-svg格式一.下载图标 1.先进入iconfont.cn页面 iconfont官网:https://www.iconfont.cn/ 2.登陆, ...
Webpack项目中引入Bootstrap4.x
Bootstrap是一个简洁.直观.强悍的前端开发框架,在Web开发中使用频率很高,本文主要记录一下如何在 webpack项目中引入Bootstrap4.x. 由于Bootstrap在各个Vue组件中 ...
如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
vue项目中引入iconfont
背景对于前端而言,图标的发展可谓日新月异.从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-loader.雪碧图没有什么好讲的了,只是简单地利用了 ...
vue2 项目中引入iconfont
在线使用 1.找到这个地址,在index.html中link引入 <link rel="stylesheet" href="//at.alicdn.com/t/c/ ...
前端学习笔记系列一：5 在项目中引入阿里图标icon
进入到阿里的图标库网站,里面有上百万种icon,https://www.iconfont.cn,需要注册一个帐号,然后进入到这个页面,在这里点击右下角的带加号的图标,创建一个新的项目,名称与你要使用图 ...
uniapp项目中引用iconfont图标，实现信号强度图标展示（离线使用）
效果选择图标加入项目在项目设置中勾选base64和彩色,取消其它项查看生成的代码可以复制这一段代码,然后在项目中以这种方式使用 <text class="iconfont&qu ...
在项目中使用iconfont图标(在线使用)
1.进入到阿里巴巴矢量图官网(https://www.iconfont.cn)搜索你想要的图标并加入项目中,如下图我的项目,项目名highway,已经添加了三个图标. 2.点击Font class 复 ...

Webpack项目中引入IconFont图标

Webpack项目中引入IconFont图标相关推荐

最新文章

热门文章