Web入门到精通：font-awesome字体图标

font-awesome 字体图标

在传统的网页制作过程中，涉及图标的情况大多用图片进行处理，图片有优势也有不足。例如，使用图或以字体(如下载字体片会增加总文件的大小并带来很多额外的HTIP请求，增大服务器的负担。并且大量图片需要下载时，也增加了用户的等待时间，牺牲了用户体验。另外，如果图片不是矢量图，在移动端高分辨率显示屏上会变得模糊，因此，在响应式设计中推荐用字体图标来代替图片。字体图标就是将图标字体化，字体通常是矢量的，能解决图片放大模糊的缺点。

自己制作字体图标是非常麻烦的，但我们可以使用font-awesome，它是一款完全开源、免费的字体图标库，提供了将近500个常用图标(并且还在不断更新)。

下载font-awesome

font-awesome其实就是一个图标工具。我们可以在GitHub上找到 font-awesome项目，将文件下载到本地。解压之后，打开文件夹目录。我们只需关注两个文件夹css 和 fonts,fonts文件夹中有我们需要的字体文件，css文件夹中是该工具提供的css文件。将 fonts 文件和font-awesome.min.css文件复制到chapter02中的css文件目录下。

    
    
    Document
    
        @font-face {
            font-family: 'FontAwesome';
            src: url("css/fonts/fontawesome-webfont.eot?v=4.5.0");
            src: url("css/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0")
            format("embedded-opentype"),
            url("css/fonts/fontawesome-webfont.woff2?v=4.5.0") format("woff2"),
            url("css/fonts/fontawesome-webfont.woff?v=4.5.0") format("woff"),
            url("css/fonts/fontawesome-webfont.ttf?v=4.5.0")
            format("truetype"),
            url("css/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregulr")
            format("svg");
            font-weight:normal;
            font-style: normal;
        }
        /*设置字体编码*/
        .fa-weixin::before{
            content: "\f1d7";
        }
        .fa{
            color: green;
            font: normal normal 5em FontAwesome;
            -webkit-font-smoothing:antialiased;
        }
    


    
    
微信公共平台开发