1. 程式人生 > 實用技巧 >如何快速引用逐浪CMS官方釋出的的ZICO圖示庫

如何快速引用逐浪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輸出例項頁面:

和原生CSS呼叫相同的顯示方法

所有的使用習慣和css呼叫相同,沒有任何不同,以確保你的習慣得到尊重。

第五種:CDN引用

如果你不想下載和安裝,也可以直接CDN引用,只要在網頁和應用中中置入zico的CDN源地址即可,其URL請求源為:這個網址同時支援SSL,你也可以採用以及SSL自響應模式: //都是合法的。

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