[分享]css中如何添加字体图标

在CSS中，添加字体图标可以实现很多炫酷的效果。这些图标不仅可以使网页看起来更加的美观，而且还可以提高用户体验。 要实现添加字体图标，首先需要找到适合自己网站的字体图标库。比如FontAwesome、...

在CSS中，添加字体图标可以实现很多炫酷的效果。这些图标不仅可以使网页看起来更加的美观，而且还可以提高用户体验。 要实现添加字体图标，首先需要找到适合自己网站的字体图标库。比如FontAwesome、Glyphicons、Ionicons等等。 选择好字体图标库后，接下来就需要在CSS中引用这些图标了。代码如下：

@font-face {
    font-family: 'FontAwesome';
    src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
         url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
         url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
         url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
         url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} 

这是一颗星星