有時候使用一些小圖標的時候，通常情況下，都是用的雪碧圖將他們放在一起，然后通過背景調用，但是很多圖標都是很簡單的字符圖標，卻往往多增加了一些請求，大小也增加了（圖片肯定比字符要大）；為什么就不能將這些簡單的字符圖標用字符編碼的形式來體現呢？這樣性能不是更好嗎？至少是一個網站優化的方向啊！所以我說干就干，在網上找找吧！照理說我這想法應該很多人都想到了啊，但是網上卻很難找到把一些常用的字符圖標轉化為字符編碼的文章或者是例子，然道是太簡單了？還是說大神都不屑於做這樣的事情！好吧，這叫我們這些菜鳥怎么辦呢！
身為菜鳥，我要為菜鳥帶鹽！其實很多菜鳥都想知道怎么去弄，可能也有很多人不會或者是不懂，所以我覺得這篇文章應該會對大部分初學者或者是想要用但是不會弄的人有幫助吧！
好了，下面就進入正題：
其實這個的原理還是蠻簡單的，就是將一些字符圖標轉換為字符編碼！那如何轉化呢？
那就要用到javascript的charCodeAt()方法了，它的作用是可以返回指定位置的字符的 Unicode 編碼，什么？你不懂？不懂沒關系，我慢慢教你！
舉個例子：
我想知道alt對於的a的字符編碼，怎么辦？
var uAlt = 'alt'; alert(uAlt.charCodeAt(0));
咱們來輸出一下：97；也就是說alt中的a對應的字符編碼就是97。可是我要得到的不是字符串的字符編碼啊，好吧，你還聽心急的，那我們就做一個簡單的字符圖標看看，比如說我要使用 ▼ （一般情況下你在網頁上還很難找到這圖標，除非是在那個word等軟件上面扣一個出來放上去，麻煩）：
var uIcon = '▼'; alert(uIcon.charCodeAt(0));
咱們再輸出一下：9660；這就是這個圖標的十進制編碼了，為什么charCodeAt(0)的括號里面是0呢？咳咳，這里你自己查一下手冊吧！
那現在是十進制的，很多時候我們都是使用的十六進制的，那怎么辦呢？高手肯定知道怎么做啦，那我就為初學者寫個示范吧：
var uIcon = '▼'; var uCode10 = uIcon.charCodeAt(0); var uCode16 = uCode10.toString(16); alert(uCode16 );
輸出的結果是：25bc;
那這2個例子一寫，很多人基本上都知道怎么弄了；但是每次要用的時候不可能每次都把它運行一遍再得到吧，好麻煩啊！
下面我寫了一個小例子，用數組的方式將他們放在一起，然后在輸出一個表格，十進制，十六進制都在上面，自己存一下，要用的時候直接復制就可以了，哈塞，好激動啊！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轉譯字符器</title>
<script>
function charEncode(){
var array = ['▲','▼','△','▽','◣','◤','◢','◥','■','□','★','☆','●','○','◆','◇','▁','▂','▃','▄','▅','▆','▇','█','▉','▊','▋','▌','▍','▎','▏','※','→','←','↑','↓',
'↖','↗','↘','↙','♠','♥','♣','♦','►','◄','▶','◀','▷','◁','◆','☺','☻','✖','✕','✔','✓','✿','❀','❁','❃','❂',
'♞','♩','♪','♫','♬','♨','☼','☎','☏','☢','◕','◐','◑','◎','⊙','♀','♂','¤','▧','▣','▤','▥','▦','▩','☀','☂'];
var length = array.length;
document.writeln("<div class=\"box\">");
document.writeln("<ul id=\"encode-list\">");
document.writeln("<li><span>圖形</span><span>十進制編碼</span><span>十六進制</span></li>");
for(var i=0; i<length; i++){
var val = array[i];
var ucode10 = val.charCodeAt(0);
var ucode16 = val.charCodeAt(0).toString(16);
document.writeln("<li><span>" + val + "</span>" + "<span>&#" + ucode10 + ";</span>" + "<span>&#x" + ucode16 + ";</span></li>");
}
document.writeln("<div style='clear:both;'>");
document.writeln("</ul>");
document.writeln("</div>");
var uIcon = '▼';
var uCode10 = uIcon.charCodeAt(0);
var uCode16 = uCode10.toString(16);
alert(uCode16 );
}
window.onload = charEncode();
</script>
<style>
*{ padding:0; margin:0;}
ul{ padding:0; margin:0; list-style:none;}
.box{ width:300px; border:1px solid #ccc; margin:20px auto 0; border-bottom:none; border-right:none;}
#encode-list li{ width:300px; height:30px; line-height:30px; border-bottom:1px solid #ccc;}
#encode-list li span{ width:99px; display:inline-block; text-align:center; border-right:1px solid #ccc;}
</style>
</head>
<body>
</body>
</html>
數組里面放的都是一些常用的字符圖標，可能一些你用不到，或者說有些不在里面，沒關系，將代碼復制下來，然后在數組里面加，就直接顯示出來了！注意哈：Unicode 編碼前面必須加上前綴才能被解析成圖標，別忘了！
雕蟲小技只為初學者學習，大神飄過！謝謝！