# 一、阿里矢量图标(字体图标)网址:https://www.iconfont.cn/#### 1.使用步骤1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右

这篇博客介绍了如何在项目中使用阿里矢量图标库,包括登录网站选择图标、下载解压、引入文件到项目中。详细讲解了Unicode、font-class和Symbol三种方式的引用步骤,以及它们的特性和适用场景。
摘要由CSDN通过智能技术生成

一、阿里矢量图标(字体图标)

网址:iconfont-阿里巴巴矢量图标库

1.使用步骤

1.登录阿里矢量图标网站

2.搜索想要的图标且加到购物车

3.点击右上角的购物车

4.选择下载代码,下载完成后解压文件

5.把下载的文件放到你的项目中

6.引入iconfont.css文件或者iconfont.js文件

使用三种方式:下载代码

1、Unicode 方式引用

Unicode 是字体在网页端最原始的应用方式,特点是:

  • 兼容性最好,支持 IE6+,及所有现代浏览器。

  • 支持按字体的方式去动态调整图标大小,颜色等等。

  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

使用步骤如下:

第一步:引入项目下面生成的 fontclass 代码:

<link rel="stylesheet" href="./iconfont.css">

第二步:挑选相应图标并获取字体编码,应用于页面

<span class="iconfont">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值