iconfont在项目中的使用方式

本文详细介绍了如何使用阿里旗下的Iconfont图标库。从注册登录到创建项目,再到选择图标并将其加入项目,最后下载至本地并整合进项目的过程。特别强调了在项目中正确引用图标的方法。

iconfont是一个阿里的图标库

1、地址: https://www.iconfont.cn

2、注册登录后选择‘我的项目’,并创建我的项目

3、选择需要的图标并加入购物车,选择购物车把购物车内的图标加入项目文件夹中

4、点击下载至本地,会获得如下文件夹和文件。

5、下面这一排文件有用,上面3个没有用。

6、在项目中新建一个iconfont文件夹,将下面这6个文件放入文件夹中,打开css文件,给非data的url加上相对路径,更加稳妥。

7、按照说明文档引入项目,说明文档为上述文件夹中的demo_index.html。

引入方法为:

<span class="iconfont">&#xe636;</span>

中间的字符串在demo_index.html说明文档中可以找到,他对应相应的icon。

在 Vue 项目中引入和使用 iconfont 主要包括以下几个步骤:从 iconfont 网站选择图标、下载资源、引入字体文件和样式、以及在组件中使用图标。 ### 从 iconfont 网站选择图标 首先,前往 [iconfont](https://www.iconfont.cn/) 网站,注册并登录账号。创建一个项目后,可以将所需的图标加入购物车,并将其添加到你的项目中。 ### 下载资源 在项目页面中,点击“Font class”或“Symbol”方式下载图标资源。通常推荐使用 “Symbol” 方式,因为它支持多色图标,更加灵活。下载完成后,解压文件并获取所需的字体文件和样式文件。 ### 引入字体文件和样式 将下载的字体文件(如 `iconfont.woff`, `iconfont.ttf` 等)放置在项目的 `assets/fonts` 目录下。接着,在项目的全局样式文件(如 `main.css` 或 `app.scss`)中引入 iconfont 的样式。 ```css @font-face { font-family: "iconfont"; src: url("./assets/fonts/iconfont.woff2") format("woff2"), url("./assets/fonts/iconfont.woff") format("woff"); font-weight: normal; font-style: normal; } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` ### 在组件中使用图标 在需要使用的组件中,通过类名来调用图标。例如,假设你有一个名为 `icon-home` 的图标,可以在模板中使用如下方式展示: ```html <template> <i class="iconfont icon-home" style="font-size: 30px; color: red;"></i> </template> ``` ### 封装成组件使用 为了提高复用性和维护性,可以将图标封装成一个 Vue 组件。创建一个名为 `Icon.vue` 的组件: ```vue <template> <i :class="['iconfont', iconName]" :style="{ fontSize: size + 'px', color: color }"></i> </template> <script> export default { props: { name: { type: String, required: true }, size: { type: [String, Number], default: 16 }, color: { type: String, default: 'black' } }, computed: { iconName() { return `icon-${this.name}`; } } }; </script> ``` 然后在 `main.js` 中注册该组件为全局组件: ```javascript import Icon from './components/Icon.vue'; const app = createApp(App); app.component('Icon', Icon); app.mount('#app'); ``` 最后,在其他组件中使用图标组件: ```html <template> <Icon name="home" size="30" color="red" /> </template> ``` ### 查看图标 如果需要查看所有图标的类名,可以打开下载包中的 `demo_index.html` 文件,里面会列出所有图标的类名,方便你在项目使用。 通过上述步骤,你可以在 Vue 项目中顺利引入和使用 iconfont 图标库,同时也可以根据需求选择不同的引用方式(如 Symbol 或 Font class)[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值