css字符图标 如何使用（css字体图标怎么用）-编程之家

CSS的字体图标图标的多种实现

什么是图标？我们先来看一个例子:

我们就以它为例吧。图中所有圈起来的部分都是图标。

这时候你就想问，这些不就是一些图片吗？

不，不是图片，是文字。

什么？马鞭这怎么可能是言语？文字怎么会这样？…

大家可以看到，市面上大部分网页使用的图标都是类似的形式，也有很多图标库可供我们使用。

这可以通过以下方式实现:

首先我们需要知道:

如何让页面显示图标？我们可以将图标作为文本来操作。步骤如下:

下面是一个具体的使用例子，你可以试一试:

或者

Css Sprites在国内被很多人称为CSS sprites，是一种网页图像处理方法。它可以让你把一个页面中涉及到的所有分散的图片都包含到一个大图中，这样当你访问页面的时候，加载的图片就不会像以前那样一张一张地显示了。就目前的网络普及程度来说，不超过200KB的单幅图片加载时间基本是一样的，不用担心这个问题。

提速的关键不是降低质量，而是减少数量。传统的剪纸很精致。图片尺寸越小越好，重量越小。其实图片大小大小无所谓，电脑都是以字节计算的。每当客户端显示一张图片，它就向服务器发送一个请求。所以图片越多，请求越多，延迟的可能性就越大。

示例:

引用此类..然后在元素中逐个定义背景坐标..以下是关键属性..

有必要限制容器大小以符合背景图像元素的位置..另外，XY轴是相对于整张图片的左上角计算的..所以价值一定要计算清楚。