跳至主要內容
找不到符合條件的結果
  • 免費軟體
    • APP
    • VPN
    • 擴充功能
    • 系統工具
    • 圖片處理
    • 影音工具
    • 網路相關
  • 線上工具
    • 圖片編輯
    • 線上轉檔
    • 產生器
  • 免費空間
    • 圖片空間
    • 影音空間
    • 音樂空間
    • 網站空間
  • 熱門主題
    • AI
    • 縮網址
    • 線上翻譯
    • 免費圖庫
    • 字型下載
    • 編輯推薦
  • 網路科技
    • 個人服務
    • 電子信箱
    • 資料查詢
    • 免費贈品
    • 趣味網站
    • 實用教學
  • 架站資源
    • DNS
    • SEO
    • WordPress
    • 網站監測
  • 素材模版
    • 網站配色
    • 免費圖示
    • 免費圖片
    • 音樂音效
    • 網頁素材
  • 關於本站
  • 文章彙整
  • 聯絡我們
  • 隱私權政策
免費資源網路社群
  • 免費軟體
    • APP
    • VPN
    • 擴充功能
    • 系統工具
    • 圖片處理
    • 影音工具
    • 網路相關
  • 線上工具
    • 圖片編輯
    • 線上轉檔
    • 產生器
  • 免費空間
    • 圖片空間
    • 影音空間
    • 音樂空間
    • 網站空間
  • 熱門主題
    • AI
    • 縮網址
    • 線上翻譯
    • 免費圖庫
    • 字型下載
    • 編輯推薦
  • 網路科技
    • 個人服務
    • 電子信箱
    • 資料查詢
    • 免費贈品
    • 趣味網站
    • 實用教學
  • 架站資源
    • DNS
    • SEO
    • WordPress
    • 網站監測
  • 素材模版
    • 網站配色
    • 免費圖示
    • 免費圖片
    • 音樂音效
    • 網頁素材
免費資源網路社群

首頁  ›  素材模版  ›  免費圖示  ›  Devicon 免費程式語言、設計、開發工具圖示集 Icon Font、SVG 兩大格式

Devicon 免費程式語言、設計、開發工具圖示集 Icon Font、SVG 兩大格式

  • 免費圖示素材模版
Devicon 免費程式語言、設計、開發工具圖示集 Icon Font、SVG 兩大格式

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

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

Devicon

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

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

使用教學

STEP 1

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

Devicon

STEP 2

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

Devicon

STEP 3

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

Devicon

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

Devicon

值得一試的三個理由:

  1. 提供各種技術及開發人員可能會用到的標誌、Logo
  2. 兩種格式:Icon Font、SVG 複製程式碼即可快速使用
  3. 免費、開放原始碼,已經內建 CDN 功能
# Icon Font# Logo# Social Network# SVG# WebFont# 免費向量圖# 免費圖示# 向量圖# 圖示# 圖示下載# 圖示字型# 圖示集# 應用程式開發# 標誌# 瀏覽器相關# 社交網路圖示# 社群網站# 程式語言# 素材# 素材模板# 網頁素材# 網頁設計# 設計# 開放原始碼# 開發# 開發工具# 雲端服務
Pseric

Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

上一 文章 Pexels 最佳免費圖庫推薦,上萬張相片素材 CC0 授權可商用改作
下一 文章 關閉 Google Chrome、Firefox 通知提示,避免被網站要求權限打擾

相關文章

線上調色盤 Online Color:設計師必備的色彩靈感神器

線上調色盤 Online Color:設計師必備的色彩靈感神器

Tawk.to:免費線上客服系統教學,5 分鐘整合網站即時聊天

Tawk.to:免費線上客服系統教學,5 分鐘整合網站即時聊天

Kigen Color Generator:免費調色盤產生器,讓設計顏色更簡單

Kigen Color Generator:免費調色盤產生器,讓設計顏色更簡單

Shape-O-Holic:超過 140 種免費 SVG 向量形狀下載

Shape-O-Holic:超過 140 種免費 SVG 向量形狀下載

ONWAイラスト:日本可愛免費插畫素材網站,超過 5800 張原創圖庫下載教學

ONWAイラスト:日本可愛免費插畫素材網站,超過 5800 張原創圖庫下載教學

ガーリー素材(Girly Sozai):免費日本可愛插圖下載,個人與商用皆可用

ガーリー素材(Girly Sozai):免費日本可愛插圖下載,個人與商用皆可用

tttexture 免費材質紋理下載:高解析度復古與混凝土紋理資源

tttexture 免費材質紋理下載:高解析度復古與混凝土紋理資源

Sound Effect Generator:免費 AI 音效製作工具,超過兩萬個音效素材免費下載

Sound Effect Generator:免費 AI 音效製作工具,超過兩萬個音效素材免費下載

關於本站

免費資源網路社群標誌

免費資源網路社群(FreeGroup)成立於 2006 年,提供超過 5,000 篇關於免費軟體、APP、線上工具等七大主題的詳細圖文教學與心得推薦,致力於幫助使用者快速找到最佳的免費網路服務與數位工具。

最新文章

  • Aiarty Image Matting AI 去背神器限時免費!Mac 完整版授權碼領取教學
  • Scrt.link:單次存取、閱後即焚的線上安全傳輸利器
  • Nero AI 線上圖片無損放大:免費 AI 增強工具一鍵提升照片解析度
  • Canva 宣布專業設計工具 Affinity 永久免費!Windows、Mac 版本免費下載
  • DNS Speed Test:找出你位置最快的 DNS 伺服器,免費線上測試工具
  • Wayback Classic:舊瀏覽器專用網站時光機前端應用
  • TuneIn 線上廣播平台:全球 10 萬個電台免費收聽教學
  • Sora 影片浮水印去除工具:免費線上全自動清除 AI 影片標誌

使用電子郵件訂閱網站

輸入你的電子郵件地址訂閱網站更新,使用電子郵件接收通知。

  • 關於本站
  • 文章彙整
  • 聯絡我們
  • 隱私權政策

© 2025 免費資源網路社群使用 WordPress 建置