使用Icon图标的几种方式

一.CSS Sprite

这也就是我们平时所说的雪碧图（也叫精灵图），主要通过background-position属性来控制图片显示的位置，不过要注意的是图片是以左上角为坐标原点，坐标的变动应在第四象限内，及x的取值为0到正无穷，y的取值为负无穷到0.

二.使用font icon

首先我们要下载font字体文件，推荐网站：https://www.iconfont.cn/

选择icon后添加购物车，下载代码（建议创建一个项目，将图标加入到项目中，这样方便后续维护），我们会得到以下几个文件，其中标红的为必须文件，一个为css样式文件，其余四个为字体文件。（除了这5个文件，其它文件可以删除）

demo_index.html页面显示了如何使用字体图标：

使用方式：

方式一：font+html

<span class="iconfont iconriqi">3</span>

方式二：font+css

<span class="iconfont iconriqi"></span>

使用Icon图标的几种方式相关推荐

C# 获取Windows系统ICON图标的四种方式-可提取各种文件夹、文件等等图标
本文介绍的是提取Windows系统内部Icon图标的方法,就是系统资源管理器里面显示的图标,包括文件夹.文件,如:常规文件夹的图标.特定文件夹图标(磁盘根目录.收藏夹.网络共享目录等).各文件类型图标 ...
在Vue3中使用Element Plus Icon图标的几种方式
安装 Element Plus $ npm install @element-plus/icons 在main.js 引入 import * as ElIcon from '@element-plus ...
android 多个应用,Android中一个应用实现多个图标的几种方式
前言最近因为新需求需要,我的应用将有多个ICON入口..最终选择了 activity-alias , 其实实现多图标有好几种方式,下面就给大家总结下,分享出来供大家参考学习: 1. 多Activit ...
android 编程一个程序实现方法,Android中一个应用实现多个图标的几种方式
前言最近因为新需求需要,我的应用将有多个ICON入口..最终选择了 activity-alias,其实实现多图标有好几种方式,下面就给大家总结下,分享出来供大家参考学习: 1. 多Activity ...
引入字体图标的三种方式
@引入字体图标的三种方式TOC Unicode引用 fontclass引用 symbol引用--此种引用方式支持多色图标字体包: 1.icomoon字库https://icomoon.io/ 2.阿 ...
小程序Icon图标的几种实现方案
小程序原生提供的Icon组件 Icon组件官网属性属性类型默认值必填说明 type string 是 icon的类型,有效值:success, success_no_circle, i ...
Vue项目引入icon图标的两种方法
我用的是阿里巴巴矢量图标库 ****一,在文件中引入icon项目链接将图标加入项目后会出一个链接(每新添加图标,此链接都应更新) 在Vue项目中,public/index.html中将项目链接复制 ...
在网页中引用阿里iconfont字体图标的三种方式
首先,你需要在阿里巴巴图标矢量库中创建账号. 创建完成后,选择你想要的图标添加到购物车(也就是添加入库). 添加了之后点击右上角的购物车按钮,弹出如下框,点击"添加至项目" 在此你 ...
阿里巴巴矢量图标库-iconfont使用方式
阿里巴巴矢量图标库-iconfont使用方式在项目开发的过程中,我们经常会使用到图标进行页面的修饰.如果使用图片,往往会遇到失真的情况,而且图片数量很多的话,页面加载也会变得很慢.所以,我们可以使用 ...

使用Icon图标的几种方式

使用方式：

使用Icon图标的几种方式相关推荐

最新文章

热门文章