html5 - 這種標志是用CSS樣式做出來的嗎?
問題描述
這種評論 轉(zhuǎn)發(fā)的圖標我看了一下源碼 好像不是用的圖片 好像是一種樣式 那么這個樣式是怎么做的呢
問題解答
回答1:iconfont實現(xiàn)的吧:http://www.iconfont.cn/
回答2:這個找個圖標的網(wǎng)站,然后生成一個css文件,用的時候引用就行了
回答3:其實是用了iconfont啦在網(wǎng)頁中設(shè)定瀏覽者系統(tǒng)中沒有的字體瀏覽器下載字體文件,并用相應(yīng)的字體進行渲染
所謂字體就是字符編碼對應(yīng)的圖形比如下面這個電話圖標實際上就是一個字可以選中復(fù)制粘貼但是根據(jù)環(huán)境所在對應(yīng)字體不同可能顯示的形式會不同最不濟的情況,可能設(shè)定的字體里面壓根沒有這個編碼對應(yīng)的圖形就不會顯示了
?
具體可以看iconfont的使用
這樣做的優(yōu)點顯而易見,字體也是文字,可以跟隨其他文本元素設(shè)置字體大小,顏色,裝飾,而且不會縮放失真
缺點同樣顯而易見,它不是圖片,所以像圖片那樣的彩色圖標就實現(xiàn)不了了
回答4:用圖標實現(xiàn)的,樓上發(fā)的就是一個網(wǎng)站,我來說點具體的。1.先在網(wǎng)站上選好圖標然后保存在一個項目里,然后下載到本地里(這里也可以用在線鏈接,下圖就是兩個操作方式的地方,也是在iconfont)
2.css中引入本地or在線鏈接(上圖),本地方法相同。
3.在要使用的樣式中指定font-family為icon,使用icon碼子,比如途中第一個圖標重新加載
.myIcon{ font-family: icon;}<span class='myIcon'><icon>回答5:
前端真是八仙過海各顯神通, 除了icon 還有base64 還是svg 甚至于canvas也能做
回答6:最簡單就用bootstraphttp://v3.bootcss.com/compone...link引入bootstrap,然后在標簽直接加類名就好了<button class='btn btn-default'>全屏 <span class='glyphicon glyphicon-fullscreen'></span></button>
相關(guān)文章:
1. php多任務(wù)倒計時求助2. 為何 localStorage、sessionStorage 屬于html5的范疇,但是為何 IE8卻支持?3. win10 python3.5 matplotlib使用報錯4. MySQL的聯(lián)合查詢[union]有什么實際的用處5. mysql 遠程連接出錯10060,我已經(jīng)設(shè)置了任意主機了。。。6. html5 - css3scale和rotate同時使用轉(zhuǎn)換成matrix寫法該如何轉(zhuǎn)換?7. 默認輸出類型為json,如何輸出html8. PHP訂單派單系統(tǒng)9. python的正則怎么同時匹配兩個不同結(jié)果?10. 數(shù)組排序,并把排序后的值存入到新數(shù)組中
