用CSS實現各種圖標是前端開發中經常需要做的一件事情，下面我們來分享一下一些常用的CSS icon的實現方案。

1. Font Awesome

//引用 FontAwesome 的 CSS

Font Awesome是一個非常流行的圖標字體庫，擁有眾多精美的icon。使用起來非常簡單，只需引用Font Awesome的CSS文件后，在HTML中通過標簽使用相應的class即可。

// 完整的 ?? 圖標// 完整的播放圖標

2. Icomoon

//引用 Icomoon 的CSS

Icomoon也是一個比較流行的圖標字體庫，相比 Font Awesome 更加輕量級，可自定義選用的 icon，能夠滿足大部分的需求。

// 完整的 ?? 圖標// 完整的播放圖標

3. 使用CSS繪制

當然，除了使用 icon 字體庫之外，我們還可以使用CSS來手動進行繪制。例如：

.heart {
width: 100px;
height: 100px;
position: relative;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
left: 50px;
top: 0px;
width: 50px;
height: 80px;
background: red;
-webkit-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.heart:after {
left: 0px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

以上代碼就能夠繪制出一個基于CSS的 ?? 圖標。

綜上，實現各種圖標的方法很多，選擇適合自己的方法能夠大大提高效率。