bootstrap字體圖標在谷歌顯示正常，在火狐顯示異常的問題

bootstrap字體圖標的使用

1. 現在有很多的網站支持字體圖標，我所知道的有bootstrap，fontawesome,iconmoon，等等，可能還有其他我並不知道
2. bootstrap只要你的文件夾目錄中有fonts文件夾，並且在頭部引入bootstrap.min.css文件，就可以在html中使用字體圖標了
3. 創建字體圖標你需要創建一個span標簽， 然后給該標簽加上相應的類名，具體的類名去官網中的組件中去找，找到你需要的圖標之后只要把圖標下面的一堆字母全部復制，然后粘貼到span的class中就一切搞定

fontawesome使用

1. 這個的使用也比較簡單，首先去官網下載他的一套東西，下載的時候直接選擇no，thanks，justdownload就可以了

2. 然后就同理了，同樣是把fonts文件夾放到你的項目文件夾中，然后在html中引入他的css文件，你就可以使用了

3. 他需要的是一個i標簽，不過道理是一樣的。

4. 引入css文件的目的最主要的就是需要

       @font-face {
         font-family: 'Glyphicons Halflings';
   
         src: url('../fonts/glyphicons-halflings-regular.eot');
         src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2')                   format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),      url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
        }
       [class^="icon-"],
       [class*=" icon-"] {
         font-family: "media";
         font-style: normal;
         display: inline-block;
         width: 1em;
         text-align: center;
         margin-right: 20px;
       }
   
       .icon-globe:before {
         content: '\e800';
         font-size: 15px;
       }
   
       .icon-window-maximize:before {
         content: '\f2d0';
       }
       /*content中使用的圖標需要自己在網站案例中找，bootstrap和fontAwesome中都不需要，使用的時候使用<i>標簽加個類名為icon-globe就可以出現了*/
   

iconmoon 的使用

1. 這個我只說一點，就是我也沒用過，不過看起來他可以自己制作字體圖標，需要用一個svg的文件進行轉換，感興趣的同學可以看下

遇到的問題

1. 今天遇到了一個浪費我很長時間的一個問題：那就是在谷歌的時候字體圖標是沒問題的，但是到了火狐瀏覽器就是沒辦法顯示
   • 第一種可能是網絡問題，把源代碼的那幾個Glyphicons 圖標的字體下載下來，覆蓋掉原來。
   • 第二種可能是bootstrap官網的文件不全，需要去github上去下載完整版（ps：這一點我並沒有證實，因為我看到是一樣的文件）
   • 第三種*{font-family:"FontAwesome","微軟雅黑"!important}，font-family中加入你使用的字體圖標文件的名字，bootstrap用的是Glyphicons Halflings，微軟雅黑也是可選任意你需要的字體
   • 實在不行就去fontello去找自己需要的下載
   • 最后一種就是我今天遇到的，在本地測試的時候火狐就是不可以，需要將html文件和fonts文件夾放到同級目錄，這樣就可以搞定了，同時需要注意的是在線上的時候不需要放到同級目錄也可以實現，這個可能和火狐的一些內部跨域機制有關系，沒有再深入的研究，所以我不瞎說了，哈哈

以上的總結並一定完整，有知道的同學可以隨時留言告訴我，大家一起進步