html5 - 這種標誌是用CSS樣式做出來的嗎？

Question

這種評論轉發的圖示我看了一下原始碼好像不是用的圖片好像是一種樣式那麼這個樣式是怎麼做的呢

#

Answer 1

iconfont實現的吧:http://www.iconfont.cn/

Answer 2

這個找個圖示的網站，然後產生一個css文件，用的時候引用就行了

Answer 3

其實是用了iconfont啦
在網頁中設定瀏覽者係統中沒有的字體
瀏覽器下載字體文件，並用相應的字體進行渲染

所謂字體就是字符編碼對應的圖形
比如下面這個電話圖標實際上就是一個字
可以選中復制粘貼
但是根據環境所在對應字體不同
可能顯示的形式會不同
最不濟的情況，可能設定的字體裡面壓根沒有這個編碼對應的圖形
就不會顯示了

☎

具體可以看​​iconfont的使用

這樣做的優點顯而易見，字體也是文字，可以跟隨其他文字元素設定字體大小，顏色，裝飾，而且不會縮放失真

缺點同樣顯而易見，它不是圖片，所以像圖片那樣的彩色圖示就實現不了了

Answer 4

用圖示實現的，樓上發的就是一個網站，我來說點具體的。
1.先在網站上選好圖標然後保存在一個項目裡，然後下載到本地裡（這裡也可以用在線鏈接，下圖就是兩個操作方式的地方，也是在iconfont）

2.css中引入本地or線上連結（上圖），本地方法相同。

3.在要使用的樣式中指定font-family為icon，使用icon碼子，例如途中第一個圖示重新載入

.myIcon{
    font-family: icon;
}
<span class="myIcon">&#xe6d6;<icon>

Answer 5

前端真是八仙過海各顯神通， 除了icon 還有base64 還是svg 連canvas也能做

Answer 6

最簡單就用bootstrap
http://v3.bootcss.com/compone...
link引入bootstrap，然後在標籤直接加類別名稱就好了
全螢幕< span class="glyphicon glyphicon-fullscreen">