CSS 小图标通常是经过字体图标库来完成的，比方 Font Awesome、Ionicons、Material Icons 等。这些库供给了一套图标字体，能够经过 CSS 类名来引证。下面是一个简略的比如，展现了怎么运用 Font Awesome 来显现一个图标：

```htmlExample of CSS Icon .icon { fontsize: 24px; / 设置图标巨细 / color: 333; / 设置图标色彩 / }

你能够依据自己的需求修正图标的巨细、色彩和类型。只需保证你的网页引入了相应的图标库。

CSS小图标制造攻略

一、CSS小图标的基本原理

CSS小图标首要经过以下几种方法完成：

1. 运用伪元素：经过`:before`和`:after`伪元素，结合`content`特点，能够创建出各种形状的图标。

2. 运用border特点：经过调整边框的款式、色彩和宽度，能够制造出简略的图形。

3. 布景图片：将图标制造在一张图片上，经过CSS的布景特点显现出来。

二、运用伪元素制造小图标

以下是一个运用伪元素制造查找图标的示例：

```css

.icon-search {

width: 12px;

height: 12px;

border-radius: 100%;

border: 2px solid currentColor;

position: relative;

margin: 30px auto;

.icon-search:after {

content: \

未经允许不得转载：全栈博客园 » css小图标代码,```htmlExample of CSS Icon .icon { fontsize: 24px; / 设置图标巨细 / color: 333; / 设置图标色彩 / }