自定义CSS的Icon图标

绝地灬酷狼 2021-07-25 01:28 487阅读 0赞

http://note.youdao.com/noteshare?id=a957d57709fe80c5f381b0a947254b44  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20191222233554461.png]  
这些是下载来的文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]  
放到项目下面  
![在这里插入图片描述][20191222233623142.png]  
在组件应用，加上后面这两段CSS代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 2]

@font-face { 
        font-family: 'iconfont';
        src: url(FontIcon/font_pause/iconfont.eot);
        src: url('FontIcon/font_pause/iconfont.eot?#iefix') format('embedded-opentype'),
            url('FontIcon/font_pause/iconfont.woff2') format('woff2'),
            url('FontIcon/font_pause/iconfont.woff') format('woff'),
            url('FontIcon/font_pause/iconfont.ttf') format('truetype'),
            url('FontIcon/font_pause/iconfont.svg#iconfont') format('svg');
      }
      .iconfont { 
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

然后再HTML页面使用 注意要和下载的数字一样  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]: /images/20210724/e0e0730899fc4829b0eb80746ed55436.png
[20191222233554461.png]: /images/20210724/3aa634c65b89464c890859ef5bbb7214.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]: /images/20210724/d63fecdd120143c98639c689f74685fc.png
[20191222233623142.png]: /images/20210724/98f3c73636384c929636e56f388e1994.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 2]: /images/20210724/153e454100c0449b9c0ab9f05aee3c42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 3]: /images/20210724/3cd234ff4d5e40259fe1a6bb92ceeb52.png