你們都對網站上使用的小圖標確定都不陌生,這些小圖標做爲網站內容的點綴,增長了網站的美觀度,提升了用戶體驗,但是你有沒有看過在這些網站中使用的圖標都是用什麼技術實現的?雖然大部分網站仍是使用普通的圖片實現,不過可供使用的技術方案還很多,這些都歸功於新的Web技術的應用。css
這個方案是使用最廣的方案,簡單有效。jQuery UI使用的就是這樣的方案。jQuery UI是把全部須要用到的小圖標放置在一張大的sprite圖片中,相似以下的圖片:html
用法也很簡單。應用圖標時,經過設置背景圖來展現不一樣的圖標。好比,要添加一個郵件的圖標,則須要設置class
爲ui-icon ui-icon-mail-closed
。ui-icon
和 ui-icon-mail-closed
的定義以下:前端
.ui-icon { background-image: url("/themeroller/images/ui-icons_888888_256x240.png"); } .ui-icon-mail-closed { background-position: -80px -96px; }
能夠看到jQuery UI的方案仍是傳統的經過設置不一樣的background-position
來切換不一樣的圖標的。此種方法簡單,可是不一樣的皮膚須要有不一樣的顏色的圖片來對應,光jQuery UI默認內置的圖片就有不少種。jquery
使用圖片的缺點也明顯,最大的缺點是很差自定義圖標的大小和顏色。限制了頁面的設計。css3
經過Web Font技術來構建小圖標是目前使用最普遍的代替普通圖片的方案。Web Font是在CSS3中引入的技術,w3c官方網站上的地址是:css3-webfonts。以下是使用Web Font的示例:git
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); } h3 { font-family: Delicious, sans-serif; }
Web Font目前已經獲得了全部主流瀏覽器的支持,因此在網頁中已經大量的使用。caniuse網站上查到的Web Font的瀏覽器支持情況以下:github
Web Font的使用使得網站再也不是侷限於系統內置的字體,網站中字體的顯示也更具備個性。Web Font儘管使用普遍,可是中文字體上的應用還不多,這主要是由於中文對應的字體文件過於龐大(中文博大精深~)。目前使用最多的Web Font是由Google提供的服務,這裏有一篇文章介紹Google Web Font的使用。這裏就不在詳細展開。今天重點要說的是Web Font用於構建小圖標。web
因爲Web Font能夠自定義字體,那麼就給了設計者設計一種特殊字體的可能,即圖標字體。這種字體具備文字的特性,好比能夠設置字體的顏色和大小,但同時具備圖標的外觀。目前使用很普遍的Web Font圖標庫是font awesome 和 BootStrap框架包含的圖標模塊glyph icons。Font Awesome提供了多達519個圖標,BootStrap中也提供了260個圖標。這些圖標基本上涵蓋了網頁中經常使用的圖標。若是不知道如何選擇圖標,這個網站能夠輔助查找。以下示例使用Font Awesome 和 BootStrap展現郵件圖標:bootstrap
<!—使用Font Awesome 生成圖標--> <i class="fa fa-envelope-o"></i> <!—使用BootStrap 生成圖標--> <i class="glyphicon glyphicon-envelope"></i>
這類框架生成圖標的原理相似,利用 ::before
和 ::after
僞對象在元素中插入內容,而後渲染內容爲圖標。好比fa
和 fa-envelope-o
的定義以下:api
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); } .fa-envelope-o:before { content: "\f003"; }
fa
類定義了元素的字體,即Web Font字體, fa-envelope-o
的做用是在元素中插入內容文字"\f003"
,內容文字經過定義的Web Font字體渲染爲一個郵件圖標。
這種方案的優點明顯,經過CSS就能夠很方便地控制圖標的大小和顏色,在開發中帶來了極大的便利性。使用Web Font生成的圖標,會自動適用不一樣的設備分辨率,不會由於放大和縮小而影響圖標顯示的質量。這個看似很完美的方案,可是在使用過程當中仍是有一些缺點的。最大的缺點是瀏覽器的支持上不夠完美,瀏覽器把圖標做爲文字進行渲染,因爲抗鋸齒的優化很差,使得圖標看起來不夠銳利。其次,因爲瀏覽器兼容性的問題,須要提供至少四種不一樣類型的字體文件。好比BootStrap提供了eot
、 ttf
、woff
、svg
這四種格式的字體文件。網站中每每只須要少數幾個圖標,可是須要引入全部的圖標文件,增長了額外的開銷。
SVG是一種基於XML的圖形格式。這是一種可縮放的矢量圖形。SVG是由W3C制定的標準,在2003年成爲了W3C的推薦標準。相比較其餘的圖像格式,SVG的優點在於:SVG能夠被不少工具讀取和修改、SVG的尺寸更小、SVG圖像在任何的分辨率下均可以高質量地打印。
SVG主要有以下的使用方式:
這種方式簡單,直接把SVG格式圖片看做爲普通的圖片來引用。這種方式在實際的使用場景中應用很少。
IE九、Firefox、Opera、Chrome及Safari都支持內聯的SVG。IE8及如下版本瀏覽器能夠經過安裝插件來支持SVG。內聯的SVG直接做爲HTML文檔的一部分,不須要單獨請求。內聯的SVG使用上很不方便,若是在HTML中加入大段的SVG代碼,則很難維護,代碼也沒法複用。
這種方式是把SVG文件直接轉成base64編碼格式,而後以Data URIs的方式引用。示例代碼以下:
.icon{ background: url(data:text/svg+xml;base64,<base64 encoded data>) }
<symbol>
元素在SVG的規範中,能夠經過<symbol>
元素來組合多個圖片到一個SVG文件中。在SVG中每一個<symbol>
表明着一個獨立的圖片或者圖標。代碼示例以下:
<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-home" viewBox="0 0 1024 1024"> <title>home</title> <path class="path1" d="M1024 590.444l-512-397.426-512 397.428v-162.038l512-397.426 512 397.428zM896 576v384h-256v-256h-256v256h-256v-384l384-288z"></path> </symbol> <symbol id="icon-home2" viewBox="0 0 1024 1024"> <title>home2</title> <path class="path1" d="M512 32l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 448c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path> </symbol> </defs> </svg>
如上代碼示例來自於 icomoon.io。能夠看到SVG元素中包含了兩個symbol元素,每一個元素都有一個id屬性。這兩個元素其實是兩個圖標。使用的方法是經過在SVG中使用use引入具體某個symbol對應的id值,即引入了symbol元素對應的圖標。以下是在HTML代碼中引入symbol的示例:
瀏覽器渲染後的效果以下圖:
能夠看到,在SVG中使用use能夠引入在一個SVG圖片中的不一樣圖標。這樣的效果相似於CSS中的雪碧圖。
隨着CSS的不斷髮展,使用CSS不只僅能夠產生一些四四方方的線框效果,同時能夠產生一些曲線和傾斜效果。主要利用了以下的CSS特性:border-radius、box-shadow、transform等效果及使用僞元素::before
和 ::after
。這些效果的搭配使用,則能夠產生一些特殊的形狀。這就給了咱們一個單純使用CSS來生成一些簡單圖標的機會。以下圖是一個常見的RSS圖標:
咱們能夠嘗試使用CSS來生成這樣的效果,假設此圖標對應的HTML只有一個簡單的元素
<i class="icon-rss"></i>
接下來定義這個icon-rss
類,先定義基本的高和寬:
.icon-rss { width: 22px; height: 22px; overflow: hidden; margin: 6px; position: relative; }
接下來利用::before僞對象定義圖標左下角的實心圓:
.icon-rss:before { content: ''; width: 6px; height: 6px; box-shadow: 0 0 32px inset; left: 0; bottom: 0; position: absolute; border-radius: 50%; }
如上的代碼中,設置元素爲絕對定位並定位於左下角。使用border-radius構建一個圓形,而後應用box-shadow,設置圓形內陰影。達到實心圓的效果。
構建完實心圓後,接下來構建右上角的兩個半圓弧。此次使用::after
僞元素。
.icon-rss:after { content: ''; width: 27px; height: 27px; right: 15%; top: 15%; position: absolute; border-radius: 50%; border: 4px solid transparent; box-shadow: inset 0 0 0 2px,0 0 0 2px; }
代碼中一樣設置元素爲絕對定位,並定位於右上角。使用border-radius構建一個圓形,但由於設置了元素的高度和寬度遠大於外框的高寬,因此超出部分被外框遮擋,達到了1/4圓弧的效果。但僅僅設置這些並不能產生兩條圓弧的效果,因此代碼中藉助了box-shadow
,產生了內外兩個陰影,實際顯示成爲兩條圓弧。兩條圓弧的距離太近,經過設置一個透明的border
,加大了兩條陰影的距離。
至此,一個RSS圖標產生。看起來很繁瑣,構建這樣一個圖標須要有很好的CSS功底。好在有第三方庫可使用。icono就是這樣一個純CSS生成圖標的庫。全部的圖標效果圖以下:
以上就是咱們在網頁中常見的圖標構建技術。在實際的使用中須要結合瀏覽器兼容來選擇合適的方案。以當前的瀏覽器發展情況,我的推薦使用Web Font 和 SVG的方案,這樣的方案更能適合當前高清屏幕的顯示。推薦使用icomoon.io庫,icomoon提供了Web Font和SVG兩種用於構建圖標的方案,也提供了PNG圖片用於降級處理。icomoon允許用戶選擇須要的圖標來打包,而不像BootStrap和FontAwsome提供了整個圖標文件,這樣保證了文件足夠小。此外在icomoon中,用戶也能夠上傳自定義的圖標。能夠看到icomoon提供了極大的便利和良好的瀏覽器兼容性。純CSS的方案還不夠成熟,瀏覽器兼容性也不夠好,可構建的圖標有限,不建議在實際的項目中使用,但能夠做爲學習的資料。