ico小圖標在前端界面中的使用

字體圖標庫http://icomoon.io

一.字體圖標的下載

Icomoon字庫：http://icomoon.io

阿里Icomoon字庫：http://www.icomoon.cn

 

下載完成並解壓之后的目錄：

下載完成之后的文件夾注意都不能刪！

 

二.字體圖標的引用

1.把下載包里的fonts文件夾放到頁面根目錄下（javaWeb項目可以放到WebContent下）

2.在css樣式中全局聲明字體：簡單理解為把字體文件通過css文件引入到頁面中，一定注意字體路徑問題！！

//style.css的前11行代碼
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?pvze7i');
  src:  url('fonts/icomoon.eot?pvze7i#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?pvze7i') format('truetype'),
    url('fonts/icomoon.woff?pvze7i') format('woff'),
    url('fonts/icomoon.svg?pvze7i#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

3.應用

            打開demo.html

 　　　粘貼到需要放置的位置(比如span標簽內)

　　　給span設置字體

 

 　　  至此小圖標即可在網頁上顯示了

三.字體圖標的追加

如果工作中原來的字體圖標不夠用了，需要添加新的字體圖標到原來的字體文件中

把壓縮包里的selection.json重新上傳，然后選中自己想要的新圖標，重新下載安裝包，並替換原來的文件即可。