<-- IE錯誤修正 --> Devicon 免費程式語言、設計、開發工具圖示集 Icon Font、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)  
舊 2017-09-08
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 Devicon 免費程式語言、設計、開發工具圖示集 Icon Font、SVG 兩大格式

Click the image to open in full size.

我介紹過不少免費圖示,但可能都沒有我接下來要推薦的圖示集特別,有時開發者需要在網站裡放上一些技術相關標誌,例如主機商告訴客戶支援那些技術(Nginx、PHP、MySQL),專案網頁顯示此程式支援那些瀏覽器(Google Chrome、Firefox、Safari),或者你的網站是使用那些技術建置等等,一般作法是會直接放上對應圖示,取代文字說明,不過現在有一套免費圖示集已經把這些可能會用到的圖案一次搞定,只要複製程式碼就能快速套用到你的網站或服務。



本文要推薦的「Devicon」是一款免費圖示集,以收錄程式語言、設計和開發工具為主,常見的技術相關標誌圖案都可在這套圖示中找到。Devicon 提供兩種使用方式:圖示字型或 SVG 向量圖格式,只要從網站上找到你要的圖案,直接將產生的代碼複製、貼上,就能快速取用圖案。

Click the image to open in full size.

值得一提的是無論是使用字型檔或 SVG,都可透過 CSS 調整大小或顯示方式,讓它能被使用於任何網頁或網路服務。除此之外,字型檔也已經支援 CDN,開發者無須自行托管檔案,節省流量開銷。如果你剛好需要取用這些標誌圖案,Devicon 是個非常方便的選擇。

網站名稱:Devicon
網站鏈結:https://konpa.github.io/devicon/

使用教學

STEP 1

開啟 Devicon 網站(目前版本為 2.0),右側會列出所有圖示集圖案,左側則有「超級」快速設定方法,簡單來說,選擇你要的圖案後,快速設定下方就會顯示出對應的程式碼,將程式碼複製到網站適當位置就能夠顯示。

Click the image to open in full size.

STEP 2

Devicon 也有提供 WordPress 的標誌,點擊後會發現圖式字型有四種樣式,SVG 版本有三種,看起來顏色不太一樣,有些除了 Logo 外還會加入英文標誌。

Click the image to open in full size.

STEP 3

我們把畫面再拉近一點,字型版本的圖示使用方式會多一行程式碼,主要是載入字型和 CSS,必須把那段樣式表鏈結放到你的網站  部分;接著再把底下的那段程式碼加入網頁裡要顯示圖示的位置,重新整理頁面就能看到效果。

Click the image to open in full size.

如果你只想單獨取用一兩個圖示,可能 SVG 版本會更適合你,至少不用載入完整字型檔及 CSS 樣式表,在請求數與流量方面都能夠大幅節省。SVG 形式是直接以程式碼繪製,因此只要三行代碼就能直接在網頁內將圖案繪製出來,非常強大,有興趣的朋友可將產生的 SVG 程式碼複製回去自己網站測試一下。

Click the image to open in full size.

值得一試的三個理由:
  1. 提供各種技術及開發人員可能會用到的標誌、Logo
  2. 兩種格式:Icon Font、SVG 複製程式碼即可快速使用
  3. 免費、開放原始碼,已經內建 CDN 功能
喜歡 Devicon 免費程式語言、設計、開發工具圖示集 Icon Font、SVG 兩大格式 嗎?歡迎將免費資源網路社群加入書籤,以 FacebookTwitterGoogle+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

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.


來源...

回覆時引用此篇文章
回覆
相似的主題
主題 主題作者 討論區 回覆 最後發表
Icon Wanted 收錄超過 20,000 種免費圖示的搜尋引擎 wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2011-11-05 11:39 AM


主題工具
顯示模式

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

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



所有時間均為 +9。現在的時間是 01:57 PM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2017,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