css中怎么获取图标不是图片

在CSS中，我们可以使用字体图标来代替传统的图片图标，这不仅能够减少网页加载时间，还能够减少网络流量。
获取字体图标通常有两种方法：一是从字体图标库中下载，二是从Font Awesome中引用。
1. 从字体图标库中下载
通过从字体图标库中下载所需的字体图标，可以更加自由地使用各种不同的字体图标。
我们可以在字体图标库中搜索并下载所需的字体图标，然后将其保存在本地项目文件夹中。一般来说，字体图标库提供了多种格式的字体图标文件，如woff、woff2、ttf等等。
在CSS中，我们使用@font-face来引入所下载的字体图标文件，具体代码如下：

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2') format('woff2'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype');
} 

其中，font-family属性定义了字体图标的名称，src属性定义了字体图标文件的路径和格式。
接着，在CSS中，我们可以使用iconfont来选择所需的字体图标，具体代码如下：

.iconfont {
  font-family: 'iconfont';
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} 

其中，font-size属性和font-style属性可以按照需求进行修改，其余属性一般不需要变动。
最后，在HTML中，我们可以使用标签来显示所需的字体图标，具体代码如下：

<p>这是一个 <i class="iconfont"></i> 图标</p> 

其中，class属性为.iconfont，表示使用在CSS中定义的字体图标样式。
2. 从Font Awesome中引用
Font Awesome是一个广泛使用的字体图标库，它提供了大量的字体图标集合，使用起来非常方便。
我们可以在Font Awesome的官网中搜索所需的字体图标，然后将其引入到自己的项目中。具体的引入方法请参考官网的指引。
在CSS中，我们使用.fa来选择所需的字体图标，具体代码如下：

.fa {
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} 

其中，font-size属性和font-style属性可以按照需求进行修改，其余属性一般不需要变动。
最后，在HTML中，我们可以使用标签来显示所需的字体图标，具体代码如下：

<p>这是一个 <i class="fa fa-camera-retro"></i> 图标</p> 

其中，class属性为.fa.fa-camera-retro，表示使用在CSS中定义的字体图标样式。