在我們制作網(wǎng)頁時(shí)，例如導(dǎo)航等，會(huì)遇到很多的一些小圖標(biāo)，這里以京東的小三角
（如下圖） 舉例，來介紹常用的一些方法。
方法一：也是比較簡單的一種方法。用background 來做，
一般用一個(gè)行內(nèi)標(biāo)簽如 i ，s 等 先轉(zhuǎn)換 顯示方式 display：block；，然后設(shè)置寬高。
如果不是單一的圖片，而是精靈圖，則應(yīng)該設(shè)置background-position 屬性
方法二：我認(rèn)為是一種比較有技巧性的方法，老版jd就這么玩的。
具體來說就是 用兩個(gè)標(biāo)簽 父標(biāo)簽控制圖標(biāo)的位置 ，子標(biāo)簽里是一個(gè)菱形依靠定位來展示大小
和方向，父標(biāo)簽第二作用是依靠overflow：hidden；截掉子標(biāo)簽超出的部分。是不是很巧妙。
代碼如下：
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>
效果如圖：
方法三：目前最主流的方式 使用字體圖標(biāo)來處理，使用非常簡單，控制方便。
現(xiàn)在有很多的字體圖標(biāo)庫，這里以阿里巴巴圖標(biāo)庫為例，選擇你需要的，放入購物車，
下載代碼。引入文件iconfont.css 文件。挑一種加載方式，so easy 。
【 微信掃一掃 】
