css添加图标_CSS：将图标添加到您的网页

css添加图标

Icons make the content on your website more visual. Generally, icons are used in buttons alongside text, in navigation menus, or alongside some important information. Earlier whenever someone had to use an icon on their webpage, they used to first download the icon, and then add an img tag with the icon's path as src to show the icon.

图标使您网站上的内容更加直观。 通常，图标在文本旁边，导航菜单中或一些重要信息旁边的按钮中使用。 以前，每当有人需要在其网页上使用图标时，他们通常会先下载图标，然后添加带有图标路径作为src的img标签以显示图标。

Not anymore, thanks to some amazing Icon Fonts like Font Amazing, Google Material Icons and Bootstrap Icons, using which we can directly use the icons without downloading or installing anything.

不再有，这要归功于一些令人惊奇的图标字体，例如Font Amazing ， Google Material Icons和Bootstrap Icons ，使用它们我们可以直接使用这些图标，而无需下载或安装任何东西。

Also, when we download and use any icon, the size of the icon image is fixed, hence for larger screen resolution it will become blur. Also, if you want one icon in 3 colors, then you have to download 3 different icon images.

同样，当我们下载并使用任何图标时，图标图像的大小是固定的，因此对于较大的屏幕分辨率，它将变得模糊。 另外，如果您想要一个3种颜色的图标，则必须下载3个不同的图标图像。

Using Icon Font libraries, we can adjust the size, color, shadow of the icon, just like we do for any other text on our webpage.

使用图标字体库，我们可以调整图标的大小，颜色，阴影，就像对网页上的其他任何文本一样。

字体真棒→ 网站 (Font Awesome → website)

To use Font awesome library into our webpage, we need to add the following code inside the head tag.

要将Font awesome库用于我们的网页，我们需要在head标签内添加以下代码。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/
font-awesome.min.css">

The above line of code, includes the CSS file for Font Awesome from the CDN server, and now we can add icons as follows:

上面的代码行包括CDN服务器上Font AwesomeCSS文件，现在我们可以添加图标，如下所示：

<i class="fa fa-cab"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-home"></i&

Live Example →

现场示例→

Google材料图标→ 网站 (Google Material Icons → website)

To use Google Material icons library into our webpage, we need to add the following code inside the head tag.

要将Google材料图标库用于我们的网页，我们需要在head标签内添加以下代码。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

The above line of code, includes the CSS file for Google Material Icons from the Google API server, and now we can add icons as follows:

上面的代码行包括来自Google API服务器的Google Material IconsCSS文件，现在我们可以按以下方式添加图标：

<i class="material-icons">card_giftcard</i>
<i class="material-icons">fingerprint</i>
<i class="material-icons">place</i>

Live Example →

现场示例→

The Google Material icons are mobile ready and are based on the Android Material theme.

Google Material图标可用于移动设备，并且基于Android Material主题。

Bootstrap图标→ 网站 (Bootstrap Icons → website)

To use Bootstrap 3.x icons library into our webpage, we need to add the following code inside the head tag.

要将Bootstrap 3.x图标库用于我们的网页，我们需要在head标签内添加以下代码。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

The above line of code, includes the CSS file for Bootstrap Icons from the MaxCDN server, and now we can add icons as follows:

上面的代码行包括来自MaxCDN服务器的Bootstrap IconsCSS文件，现在我们可以添加图标，如下所示：

<i class="glyphicon glyphicon-music"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-time"></i>

Live Example →

现场示例→

翻译自: https://www.studytonight.com/cascading-style-sheet/css-icons

css添加图标