跳至主要內容
找不到符合條件的結果
選單
  • 免費軟體
    • 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 通知提示,避免被網站要求權限打擾

相關文章

Remix Icon 免費開源圖示集:收錄超過 3000 種精緻圖案,支援 SVG、Webfont 與 Vibe Coding

Remix Icon 免費開源圖示集:收錄超過 3000 種精緻圖案,支援 SVG、Webfont 與 Vibe Coding

BBC Sound Effects:收錄三萬種以上免費音效素材,支援 WAV、MP3 格式下載

BBC Sound Effects:收錄三萬種以上免費音效素材,支援 WAV、MP3 格式下載

Mock.Club:超過 2700 張 AI 生成裝置模型,免費下載無浮水印的 Mockups 素材庫

Mock.Club:超過 2700 張 AI 生成裝置模型,免費下載無浮水印的 Mockups 素材庫

微光啟動色卡工具:免費線上色彩檢視、專業配色建議與常用色卡整合

微光啟動色卡工具:免費線上色彩檢視、專業配色建議與常用色卡整合

線上調色盤 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 向量形狀下載

關於本站

免費資源網標誌和文字

免費資源網(FreeGroup)成立於 2006 年,累積超過 5,000 篇免費軟體、App 與線上工具等七大主題的圖文教學與心得,專注分享實用且值得信賴的免費數位資源。

使用電子郵件訂閱網站

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

贊助我

Buy Me A Coffee

最新文章

  • storage.to 教學:25 GB 超大免費空間,免註冊高速上傳分享與閱後即焚
  • bely.cc 免費短網址教學:BePTT 團隊開發,極速轉址與安全檢測
  • SaveXR 免費線上影片下載器:支援 YouTube、IG、TikTok 跨平台下載
  • Flow-Fi:免費 Lo-Fi 音樂電台,結合計時器提升工作與唸書專注力
  • 手搖飲控必備!茶尋 Tearch App 收錄全台兩千種飲品菜單、隨機轉盤解決選擇困難
  • 訂閱服務太多難管理?「訂閱管家」免註冊、自動換算匯率的理財神器
  • FilePizza:免上傳、無限制的點對點瀏覽器 P2P 傳檔工具
  • Internet Archive Wayback Machine Link Fixer:解決 WordPress 網站 404 失效鏈結的自動化神器
  • 關於本站
  • 文章彙整
  • 聯絡我們
  • 隱私權政策

© 2026 免費資源網使用 WordPress 建置