<-- IE錯誤修正 --> Geomicons 免費 SVG 平面圖示集下載,為網頁設計開放原始碼 - RiS社群 | FileMaker 中小企業應用



快速發表主題
返回   RiS社群 | FileMaker 中小企業應用 > 交流平台 / 老少咸宜 (General forums) > 創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) > 精選好用APP等相關網站資源 (Website Reviews)

精選好用APP等相關網站資源 (Website Reviews) 本區除了同步注入"免費資源網路社群 "最新資訊外,也不定時將一些提供更多值得關注的App或網站介紹,盡量滿足男女老少們喜愛!


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 2018-05-18
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 Geomicons 免費 SVG 平面圖示集下載,為網頁設計開放原始碼

Click the image to open in full size.

網頁圖示(Web icons)已經成為這幾年網頁設計相當重要且不可或缺的元素,印象中早期是採用插入圖片的作法,但這會因為載入大量圖片而造成請求數大幅增加等問題,連帶也會拖慢網頁速度,後來有人想出「CSS Sprites」將所有圖片合併成一張,再以 CSS 語法調整顯示的位置,就能讓圖片載入一次情況下做更有效率的應用。



最近很多介面已經逐漸改以 SVG 格式的圖示為主,可直接從 CSS 自訂又能調整尺寸而且沒有失真或模糊等問題,也可直接將語法寫入原始碼中,大幅降低圖示佔用的流量或頁面請求數。

Click the image to open in full size.

本文要推薦的「Geomicons」是一款為網頁設計、開放原始碼圖示集,相較於其他類似的網頁圖示來說更小、更輕量化,而且載入時在網頁請求數部分比其他同類服務少,因此可以說 Geomicons Open 是以效能角度設計而建構出的免費圖示集。

除此之外,Geomicons 是一款「手工」編寫的圖示,不是以傳統向量圖繪圖軟體製作,避免這些軟體加料讓檔案膨脹變大,如果你正在尋找乾淨簡單又一目了然的圖示設計,可先到 Geomicons 範例網頁查看這些圖示有無符合自己需求。

網站名稱:Geomicons
網站鏈結:http://jxnblk.com/geomicons-open/GitHub

使用教學

STEP 1

開啟 Geomicons 的 Demo Page 會看到所有圖示,算了一下數量是 56 個,線條構成都很簡單,適用於各種顏色或大小,也能透過 CSS 樣式表直接自訂大小或顏色等屬性。

Click the image to open in full size.

從最下方找到「Download」按鈕下載所有圖示,不過剛才試了一下好像無法下載,但沒有關係,所有圖示都是開放原始碼且放在 GitHub 頁面上,我們只要前往 GitHub 一樣可以從 Releases 找到相關檔案。

如果你熟悉 NPM 套件管理工具指令,也能利用網站提供的指令快速下載所有圖示。

Click the image to open in full size.

STEP 2

若你想將 Geomicons 圖示運用到自己的網站、部落格或網路服務,建議可以在 GitHub 找到相關使用說明,例如在網站載入 JavaScript 檔案,透過 data-icon 屬性來載入你需要的圖示圖案,跟一般網頁圖示的使用方法差不多,有興趣的話可以自己研究一下,在這裡就不多做贅述。

Click the image to open in full size.

值得一試的三個理由:
  1. 開放原始碼、平面化設計的免費圖示集
  2. 提供 svg 格式下載,可透過 JavaScript 載入網頁
  3. 相較於其他類似的網頁圖示來說更小、更輕量化
喜歡 Geomicons 免費 SVG 平面圖示集下載,為網頁設計開放原始碼 嗎?歡迎將免費資源網路社群加入書籤,以 Facebook、Twitter 或 Google+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.


來源...

回覆時引用此篇文章
回覆
相似的主題
主題 主題作者 討論區 回覆 最後發表
FlatIcon 超過 12,000 個平面化圖示設計,免費下載(SVG、PNG、WebFont 格式) wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2013-10-09 01:29 PM
邀請好友使用 avast!,免費獲取 avast! Internet Security 三年份(價值 $79.99) wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2013-07-21 04:09 PM
我是免費資源網路社群,今年五歲! wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2011-08-16 11:53 AM
新書上市:《200+免費資源懶人包》參加新書抽獎活動免費送! wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2011-03-16 07:10 PM
經過分析、篩選、花時間撰寫的好文 [正版]【不盜版】用15個「免費正版軟體」取代付費軟體! (狂省10萬元!) 小正正 創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) 0 2008-07-26 02:43 AM


主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +8。現在的時間是 07:52 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2018,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝正洋資訊顧問有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2