樣式小圖標的三種處理方式

搜狗：tubiao/icon

小圖標的處理方法有三種：

一，最直接就是切圖放在文件中進行讀取
缺點：
1，屢次HTTP請求，影響性能
2，不方便修改和維護。（每次修改都要從新修改美工修改圖片大小，顏色等等）

二，使用base64，把圖片轉換爲base64代碼
本質：把小圖標經過Base64轉換成 Base64格式的圖片 或者是 二進制編碼
1，打開網址：https://www.sojson.com/image2base64.html
2，點擊選擇文件---選擇須要轉換的圖片---肯定---等待轉換完畢
3，通過Base64 編碼後的文件體積通常比源文件大 30% 左右
4，瀏覽器通常都有限制最大值，Opera9~11 限制爲 64K，IE8 限制爲 32KB

優勢：
1，減小HTTP請求

缺點：
1，不兼容IE 6 / IE 7
2，編碼後比原圖大 30% 左右
3，手動修改，更麻煩
4，二進制編碼是不能做爲對象單獨緩存的，除非緩存整個頁面。

三，經過CSS畫一個小圖標(通常都是比較簡單的圖標)
使用該種方法通常要提早和美工商量好的。
小圖標可使用<i></i>標籤：
CSS代碼畫三角形以下：

向上的三角形：
.triangle {
margin-left: 8px;
height: 0;
width: 0;
border: 6px solid transparent;
border-top: none;//不設置，在控制檯空看出，圖標的高度莫名的佔據了12px,計算了透明的上邊框。
border-bottom: 6px solid blue;
}

向下的三角形：
.triangle {
height: 0;
width: 0;
border: 6px solid transparent;
border-bottom: none;//必須設置，不然向下圖標會跑動。
border-top-color: red;
}

優勢：
1，減小HTTP請求
2，兼容性好
3，簡單不麻煩，性能好
4，跟原圖不會如出一轍，許提早跟設計或者交互提早溝通。

缺點：
1，不兼容IE6及如下瀏覽器

四，使用圖標字體
本質：就是字體，只是長了一個圖像的臉，說白了就是特殊符號。
怎麼修改字體就怎麼修改圖標字體。

優勢：
1，矢量圖，不失真
2，減小HTTP請求
3，兼容性好
4，簡單操做，怎麼操做字體，就怎麼操做圖片字體(如顏色，大小等)

缺點：
1，基本做用於小圖標
2，有時沒法百分百還原設計稿(由於圖標大小沒法和設計稿如出一轍)
建議在設計以前就和設計或者交互溝通好。

獲取圖標字體的網站有兩個：
1，國外網站：https://icomoon.io/ 通常要付費的,速度比較慢，使用英文搜索
2，阿里巴巴矢量圖標庫：https://www.iconfont.cn/home/index 響應速度相對快，且免費的。使用中文搜索

解析下阿里巴巴矢量圖標庫的使用方法：
1，打開網站： https://www.iconfont.cn/home/index

2，使用中文搜索，輸入須要的圖標如：搜索，購物車，箭頭等等。
鼠標點擊圖標中購物車圖標，先加到購物車中，等等一塊兒下載。

3，把全部須要的圖標字體添加到購物車中，點擊下載代碼，所有下載---右鍵解壓出來。

4，在項目中建立一個文件夾名字叫font , 和 css 平級，把文件如下5個文件複製到font中：
iconfont.eot iconfont.svg iconfont.ttf iconfont.woff iconfont.woff2
這 5 個文件是用於兼容其餘瀏覽器，由於不一樣的瀏覽器支持的格式不一樣。

5，同時使用編輯器打開文件 iconfont.css 複製裏面的全部內容，把它放到一個css文件中，而且引用該樣式。

6，修改 @font-face 中的 引用如下5個文件：iconfont.eot/iconfont.woff/iconfont.svg/iconfont.ttf/iconfont.woff2 的全部 url 的相對地址。
這裏面的全部 url 都是引用文件夾 font 裏面的字體，注意相對路徑的書寫，千萬別寫錯了。
其中有一個 url('data:application...') 這裏千萬別進行修改，不然直接報錯。

7，把 @font-face 中的 類名 .iconfont 和 .icon-jiantoushang(就是須要顯示的圖標字體的類名) 放到須要顯示的標籤的類裏面便可正常顯示。
好比須要在標籤 i 顯示 下拉箭頭，有兩種方式，以下：

第一種：
<i class="iconfont icon-jiantoushang"></i> 這樣便可正常顯示 向上的箭頭。

第二種：
<i class="iconfont ">&#xe695;</i> 這樣便可正常顯示 向上的箭頭。
注意編碼： &#xe695; 是從 demo_index.html中得到的，
打開demo_index.html幫助文檔 能夠看到每一個圖標字體下面都有相應的unicode編碼，
不一樣的是，以上編碼是 使用 &#x 代替了 unicode 編碼的 斜杆

若是使用了unicode的編碼，那麼就不須要 icon-jiantoushang 這些圖標字體類了，能夠刪了，只留一個對象@font-face 一個類.iconfont
後面具體的圖標字體類就不須要了。

難點：
如：這裏使用的是下拉列表向下的圖標字體
.dropdown-arrow {
/* i 標籤有時要設置爲行內塊級元素才能夠進行旋轉，transform:rotate(180deg);*/
display: inline-block;

/* 設置全部字體的高度不繼承父元素的行高*/
line-height: 1;
/* background-repeat: no-repeat; */
}

搜狗：css    CSS原生變量 :root{ --columns: 5; }yangshiyouxianji   (樣式優先級)link   鏈入外部樣式xuanzeqi    (jQuery選擇器)mingmingguifan    (命名規範)textalign    元素內文本水平對齊方式vertical     多種方案：對文本元素上下左右垂直居中font         設置複合文字字體overflow/yichu   對文本溢出是否換行的操做wenbenyangshi  單詞和字母的間距，文本修飾和文本縮進word-spacing、letter-spacing、text-decoration、text-indentjuzhong/chuizhijuzhong    上下左右垂直居中liebiao/list   設置有無列表的樣式，及列表一些屬性position      相對、絕對，固定，磁貼定位buju/shengbeibuju/shuangfeiyibuju       經典佈局(行/列布局，混合佈局:聖盃佈局，雙飛翼佈局)xuanzeqi     包括CSS3選擇器和Jquery選擇器yuanjiao/borderradius   圓角屬性yinying/boxshadow   盒模型的陰影border/borderimage   用圖片作爲邊框的背景圖片xianxingjianbian     線性漸變jingxiangjianbian    徑向漸變wenbenyinying/yinying        設置文本陰影transform       轉換rotate translate scale skewtransition/guodu      動畫過渡animation       動畫語法及實例luanma               解決亂碼問題teshufuhao      網頁上的一些特殊符號chaolianjie     a標籤 錨 下載 郵箱等等get/post        方法innertext      設定通用方法獲取指定對象的文本內容ajax           ajax 的用法及其封裝json           json語法以及如何使用ajax進行訪問該數據jsonp/kuayu    如何使用JSONP進行跨域訪問數據html           HTML5的標籤總結JavaScriptjavascript    js的組成等基礎bianliang      9種數據類型能夠做爲變量shujuleixing/jibenshujuleixing   具體的基本數據類型及其注意點zuoyongyu      全局做用域，局部做用域，構成做用域鏈yujiexi        預解析的過程和實例laji/neicun    垃圾收集機制和內存問題number/parseint/parsefloat   把字符串轉換爲數值string    對字符串的各類操做、以及把指定對象轉換爲字符串。boolean        布爾值true/falsesanyuanyunsuanfu    三元運算符 a?b:cluojiyunsuanfu/yu/huo/fei   邏輯運算符：與 或 非bijiaoyunsuanfu      比較運算符:> < >= <= == != === !==suanshuyunsuanfu/jiajianchengchu   加減乘除取模alert/prompt/shurukuang/jinggaokuang  提示框和警告框if/for/while/switch        三種條件語句的語法及實例duanlucaozuo               短路操做就是使用：邏輯運算符 或||for                       for實例/水仙花等break/continue          結合上面循環語句進行跳出循環function              js函數的語法hanshu                函數的定義，即各類函數return                函數的各類返回值arguments             函數中的arguments各類屬性js內置函數：String  對字符串的各類操做Array   數組Date    獲取時間Math    獲取js內部的各類函數