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标签以显⽰图标。
Bootstrap Icons, using
Google Material Icons and Bootstrap Icons
Not anymore, thanks to some amazing Icon Fonts like Font Amazing
Font Amazing, Google Material Icons
which we can directly use the icons without downloading or installing anything.
Google Material Icons和Bootstrap Icons
Bootstrap Icons ，使⽤它们我们
Font Amazing ， Google Material Icons
不再有，这要归功于⼀些令⼈惊奇的图标字体，例如Font Amazing
可以直接使⽤这些图标，⽽⽆需下载或安装任何东西。
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 → )
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="cdnjs.cloudflare/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&
Google材料图标→ (Google Material Icons → )
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="leapis/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>
The Google Material icons are mobile ready and are based on the Android Material theme.
Google Material图标可⽤于移动设备，并且基于Android Material主题。
Bootstrap图标→ (Bootstrap Icons → )
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="maxcdn.bootstrapcdn/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:
icon图标库
上⾯的代码⾏包括来⾃MaxCDN服务器的Bootstrap IconsCSS⽂件，现在我们可以添加图标，如下所⽰：
<i class="glyphicon glyphicon-music"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-time"></i>
翻译⾃:
css添加图标

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。