@font-face製做Web Icon
@font-face是CSS3中有關於字體設置的屬性，經過@font-face能夠將本地字體設置爲Web頁面字體，並能兼容全部瀏覽器，使用這個屬性就沒必要擔憂用戶本地不具有這樣的字體。由於咱們把字體都上傳到服務器上，不過這樣一來不少人擔憂影響性能問題。魚和熊掌不能兼得嘛，咱們就不在爲這個問題說太多的話了，不過我今天要與你們分享的主題和這個@font-face仍是有很在關係的，使用他配合必定的字體來製做Web頁面中的Icon圖標。初一看有點不實際，之前的Icon都是依靠圖片來完成，怎麼可能用字體就能實現呢？若是你之前有用過HTML的實體符，我想就不會那麼驚奇了。css
若是你之前關注過本站，我想這個你並不會陌生，由於我在css3製做3D分頁導航一文中就有用到@font-face來製做icon的效果：html
今天我想和你們進一步的探討這方面的應用，同時爲你們準備了多種字體制做Icon的效果，下面咱們一塊兒來看看吧。css3
製做思路
思路其實很清晰，咱們就是須要獲得font icon的字體，而後經過@font-face將這個字體運用到必定的字符上，從而讓他渲染出來是ICON的效果。難就難在沒法獲得這樣的字體，今天我給你們蒐集了三種免費的字體，以供你們學習。接下來咱們一塊兒來學習這三種字體如何轉換成Web上的Icon圖標。git
第一種：Guifx字體
要使用Guifx字體制做Icon，你首先要獲得相應的字體，而後經過fontsquirrel轉換各瀏覽器所需的字體，詳細的操做過程你們能夠參考@font-face。github
字體獲得了就好辦了，如今只須要使用必定的編碼來表明相應的字符，打個比方來講：web
<div class="icon">A</div>
那麼上面的「A」字符表明的就是一個Icon，只不過咱們須要把剛纔獲得字體運用上去：bootstrap
@font-face { font-family: 'GuifxIcon'; src: url('Guifx/guifx_v2_transports-webfont.eot'); src: url('Guifx/guifx_v2_transports-webfont.eot?#iefix') format('embedded-opentype'), url('Guifx/guifx_v2_transports-webfont.woff') format('woff'), url('Guifx/guifx_v2_transports-webfont.ttf') format('truetype'), url('Guifx/guifx_v2_transports-webfont.svg#Guifxv2TransportsRegular') format('svg'); font-weight: normal; font-style: normal; } .icon { font-family: 'GuifxIcon'; }
這樣運用事後，"A"在web中就渲染成下圖的icon效果：api
上面拿了一個簡單的Icon來作實例，其餘的運用也是這樣的，下面我將對應的字符和Icon對照表放上來讓你們使用時好參考，免得測試的時間：瀏覽器
有關於詳細的代碼你們能夠查看這裏，固然你能夠點擊下載相關字體和代碼。服務器
第二種：websymbols字體
這種字體其實運用和前面介紹的方法是同樣的，惟一區別是使用的字體不同，從而字母渲染出來的Icon也就不同了。下面咱們一樣來看「A」渲染出來的效果
<div class="icon">A</div>
樣式的使用：
@font-face{ font-family: 'WebSymbolsRegular'; src: url('websymbols/fonts/websymbols-regular-webfont.eot'); src: url('websymbols/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('websymbols/fonts/websymbols-regular-webfont.woff') format('woff'), url('websymbols/fonts/websymbols-regular-webfont.ttf') format('truetype'), url('websymbols/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); } .icon { font-family: 'WebSymbolsRegular'; }
對應出來的Icon就是下圖的樣子了：
我想你們確定也在頭痛字體的來源吧，不急，點這裏下載吧。一樣給你們附上相應的字符照圖，以供你們參考：
有關於詳細的代碼你們能夠查看這裏，固然你能夠點擊下載相關字體和代碼。
第三種：Font Awesome
Font Awesome是一個強大的字體制做Icon的案例，做者在Bootstrap Icon的基礎上將Icon圖片換成了字體來製做。初看真的讓我汗顏呀，太強大了。下面咱們一塊兒來看看如何使用？
HTML Markup
<div class="icon-glass"></div>
相對來講這個字體制做ICON複雜一點，他是在Bootstrap Icon基礎上擴展的，只不過區別是Bootstrap Icon採用的是IMG，而他採用的是@font-face:
@font-face { font-family: 'FontAwesome'; src: url('font/fontawesome-webfont.eot'); src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'), url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); font-weight: normal; font-style: normal; } /* sprites.less reset */ [class^="icon-"], [class*=" icon-"] { display: inline; width: auto; height: auto; line-height: inherit; vertical-align: baseline; background-image: none; background-position: 0% 0%; background-repeat: repeat; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .icon-glass:before { content: "\f000"; } .icon-music:before { content: "\f001"; } .icon-search:before { content: "\f002"; } .icon-envelope:before { content: "\f003"; } .icon-heart:before { content: "\f004"; } .icon-star:before { content: "\f005"; } .icon-star-empty:before { content: "\f006"; } .icon-user:before { content: "\f007"; } .icon-film:before { content: "\f008"; } .icon-th-large:before { content: "\f009"; } .icon-th:before { content: "\f00a"; } .icon-th-list:before { content: "\f00b"; } .icon-ok:before { content: "\f00c"; } .icon-remove:before { content: "\f00d"; } .icon-zoom-in:before { content: "\f00e"; } .icon-zoom-out:before { content: "\f010"; } .icon-off:before { content: "\f011"; } .icon-signal:before { content: "\f012"; } .icon-cog:before { content: "\f013"; } .icon-trash