如何快速引用逐浪CMS官方發佈的的ZICO圖標庫

隨着對版權的要求不斷提升，都想擁有自主研發的東西可隨手拿來就用。不論是在字體，仍是在圖片上，很多平臺都爲版權問題費盡心事，字體版權用到的不少糾紛問題如方正，說起你們都熟悉；圖片版權更是近兩年比較熱的事情，因圖片版權問題你們都認識了視覺中國。隨之版權意識高的公司都在作自有知識產權的研發儲備。

ICO是什麼？

ICO是Windows的圖標文件格式，實際上是ico file的縮寫形式，它是基於windows開發的圖標文件格式。圖標文件能夠存儲單個圖案、多尺寸、多色板的圖標文件。一個圖標其實是多張不一樣格式的圖片的集合體，而且還包含了必定的透明區域。

如今ICO的應用範圍普遍，使用方法也多，逐浪CMS爲此專門開發了ico圖標庫供開發者使用，一個專爲中國開發者而生的跨平臺圖標解決方案，同時基於zico技術能夠快速渲染webfont或svg矢量圖標，並提供免費的網頁字體技術。

zio是一個很是優秀的webfont與svg圖標展現系統，它的目標是讓全棧開發者與用戶能夠自由的任何頁面引用矢量級的圖標。

隨着計算機軟件技術的進步，人們不管是在開發傳統客戶端軟件、移動APP軟件、微信公衆號、微信小程序、Facebokk內頁，或從事web網站系統的開發，都須要用到圖標。

能夠說，一個UI交互界面，除了顏色、字體以外，最重要的就是圖標系統了，一個好的圖標可讓人們對界面（應用）一目瞭然，並提高業務能力。

逐浪CMS開發的圖標庫的引用方法有多種，接下來咱們詳細看下:

第一種：桌面引用：盡情的在windows、Mac OS、Linux等電腦環境中使用zico矢量全真圖標集

下載zio圖標集，選擇其中「電腦版」安裝後，拷貝下面符號到電腦軟件中(如Photoshop、 Illustrator、CorelDraw、Word等)，選擇字體爲「逐浪矢量全真圖標"或「ZoomlaIco-A050"便可生效。

下載好的文件，點擊安裝便可，安裝好的文件在各類應用軟件中均可用。

上圖下面三個圖標是直接引用的ZoomlaIco-A050即爲：逐浪矢量全真圖標

第二種：直接SVG引用快速又簡單

選擇點擊你須要用的圖標，進入圖標詳情頁，

點擊獲取SVG引用代碼，直接一鍵複製，方便快捷，顏色也可自定義選擇。

<svg width="1rem" height="1rem" xmlns="SVG namespace" name="zi_glass" viewBox="0 0 2000 2000"><path d="M1594 459v2q1 3 1 6t-1 7v402q0 296-190 504.5T930 1609v227h324v154H545v-154h324v-227q-284-20-474-228.5T205 876V476q0-1-1-2v-7-7q1 0 1-1v-2q17-110 215-183.5T899 200q282 0 479.5 73.5T1594 457v2zm-82 423V593q-203 152-613 152-409 0-613-152v289q0 269 180 460t433 191q254 0 433.5-191T1512 882zM899 667q281 0 447-69.5T1512 467q0-61-166-130t-447-69q-280 0-446.5 69T286 467q0 61 166.5 130.5T899 667z"/></svg>

第三種：基於scss/sass混合的引用：對一個圖標快速自定義顏色，方法就是：<i class="zi zi_baseballball" zico="棒球" style="color: red"></i>

自由混合

zico提供了基於scss/sass的混合器，其scss源碼與map文件均已經全面開放，你能夠下載在在scss文件夾中得到。
下載zico後，您就能進行混合，目錄結構以下所示：

 

混合配置

爲了更好的支持中文環境，咱們的scss有可能採用了中文變量，因此您可能要選擇正確的編譯軟件，其中微軟的visual code、adobe的Dreamver cc 2017以及更高版本均能較好的混合。
`
如下是咱們的推薦的混合配置：

 

擴展

因爲遵循開放協議，因此你經過混合，能夠將zico徹底集成在你的系統中1。
[1] 若是你還不熟悉scss/sass混合，能夠瀏覽這裏

Sass世界上最成熟、穩定和強大的CSS擴展語言 | Sass中文網​code.z01.com

快速精簡

有時可能須要對CSS文件進行精簡，從而提高訪問速度。
一般經典的理論認爲，網頁通常速度爲3秒，超過5秒就是不可接受的。
因此開發者們常是想盡辦法去簡化請求的效率。

若是你是採用css引用，則能夠經過刪除或註釋zico.css文件的前兩行來簡化。
可簡化的兩行代碼是：

@import url(zico_tm.min.css);
@import url(zico_gov.min.css);

 

 

`
簡化了這兩行後，則帶來的問題是：

1. 不能調用品牌庫
2. 不能調用政務特點庫對於大多數用戶來講，這兩類庫不是必須的，因此是能夠精簡的。

自由精簡

你也能夠根據須要進行精簡，刪除沒必要要的代碼，尤爲是根據咱們提供的Scss/sass混合器來處理，其網址：

基於scss/sass混合的介紹_zico​ico.z01.com

 

第四種： 基於JS輸出SVG圖標的方法引用：組合應用更加方便：<span class="zi_group zi_2x"><i class="zi zi_squareLine zi_group2x"></i> <i class="zi zi_digg zi_group1x"></i></span>

一行JS文件引用

若是你要採用zico的svg輸出，只要引用一行JS就能夠了。
你能夠下載zico文件包，將js文件拷到程序目錄中（推薦）。
也能夠經過雲端讀取咱們的遠程zico文件，其地址是：
http://ico.z01.com/zico.min.js

引入行，就能夠自由的調用圖標了，寫做html標籤時，仍是同樣的引用，其方法如：<i class=」zi zi_user>`

咱們這裏提供了一個svg輸出實例頁面：
http://ico.z01.com/svg.shtml

和原生CSS調用相同的顯示方法

全部的使用習慣和css調用相同，沒有任何不一樣，以確保你的習慣獲得尊重。

第五種：CDN引用

 

若是你不想下載和安裝，也能夠直接CDN引用，只要在網頁和應用中中置入zico的CDN源地址便可，其URL請求源爲： http://ico.z01.com/zico.min.css 這個網址同時支持SSL，你也能夠採用 https://ico.z01.com/zico.min.css 以及SSL自響應模式： //http://ico.z01.com/zico.min.css 都是合法的。

更多可訪問逐浪圖標庫官方，引用方法多，使用簡單。