網頁上的圖標從以前的圖片文件發展到使用CSS來實現。CSS圖標主要有兩類，一類是使用字體圖標，還有一類則是使用“SVG圖標”。下面介紹一下這兩種CSS圖標實現的原理。

.font-awesome{
font-family: 'FontAwesome';
color: #f60;
font-size: 24px;
}

字體圖標的原理是使用特定的字體文件，其中包含了各種各樣的圖標的字體字符，頁面使用時直接引入字體文件，在CSS中定義對應的字體，使用相應的字符代表需要的圖標，設置字體大小和顏色即可。這種方式的好處是可以使用字體相關的CSS屬性，如字體大小，顏色等來控制圖標的樣式，同時也能避免因為圖片的縮放而出現的像素失真問題。目前比較流行的字體圖標是“FontAwesome”。

.icon{
background-image: svg(url(svg_icon.svg));
width: 50px;
height: 50px;
}

SVG圖標是基于“可縮放矢量圖形”技術的，是使用XML定義的矢量圖形，可以縮放到任意的尺寸而不會失真，同時也具有良好的渲染性能。使用SVG圖標的方式是將SVG圖形文件引入到CSS中，設定其大小和其他樣式屬性，然后在HTML中使用“background-image”的方式來引用SVG文件即可。使用SVG圖標最大的好處是可以支持更為復雜的圖形，同時也能通過CSS來控制其外觀。