在我們製作網頁時，例如導航等，會遇到很多的一些小圖標，這裡以京東的小三角（如下圖） 舉例，來介紹常用的一些方法。 方法一：也是比較簡單的一種方法。用background 來做，一般用一個行內標簽如 i ，s 等 先轉換 顯示方式 display：block；，然後設置寬高。 如果不是單一的圖片，而是 ...
在我們製作網頁時，例如導航等，會遇到很多的一些小圖標，這裡以京東的小三角（如下圖） 舉例，來介紹常用的一些方法。
方法一：也是比較簡單的一種方法。用background 來做，一般用一個行內標簽如 i ，s 等 先轉換 顯示方式 display：block；，然後設置寬高。
如果不是單一的圖片，而是精靈圖，則應該設置background-position 屬性
方法二：我認為是一種比較有技巧性的方法，老版jd就這麼玩的。
具體來說就是 用兩個標簽 父標簽控製圖標的位置 ，子標簽里是一個菱形 依靠定位來展示大小和方向，父標簽第二作用是依靠overflow：hidden；截掉子標簽超出的部分。是不是很巧妙。
代碼如下：
1 <style> 2 .box{ 3 display: block; 4 width: 200px; 5 height: 20px; 6 background: gold; 7 overflow: hidden; 8 position: relative; 9 top: 100px; 10 left: 200px; 11 /*控制小三角的位置*/ 12 } 13 .ico{ 14 font-style: normal; 15 /*解決菱形傾斜*/ 16 text-decoration: none; 17 position: absolute; 18 top: -8px; 19 /*控制三角的大小和方向*/ 20 } 21 </style> 22 </head> 23 <body> 24 <i class="box"> 25 <s class="ico">◇</s> 26 </i> 27 </body>
效果如圖：
方法三：目前最主流的方式 使用字體圖標來處理，使用非常簡單，控制方便。
現在有很多的字體圖標庫，這裡以阿裡巴巴圖標庫為例，選擇你需要的，放入購物車，下載代碼。引入文件iconfont.css 文件。挑一種載入方式，so easy 。
