跳至主要內容
  • 免費軟體
    • 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# 免費向量圖# 免費圖示# 向量圖# 圖示# 圖示下載# 圖示字型# 圖示集# 應用程式開發# 標誌# 瀏覽器相關# 社交網路圖示# 社群網站# 程式語言# 素材# 素材模板# 網頁素材# 網頁設計# 設計# 開放原始碼# 開發# 開發工具# 雲端服務
上一 文章 Pexels 最佳免費圖庫推薦,上萬張相片素材 CC0 授權可商用改作
下一 文章 關閉 Google Chrome、Firefox 通知提示,避免被網站要求權限打擾

相關文章

AI 讓大頭貼升級!pfp.fm 將你的照片轉換成 3D、漫畫、日本動漫風格頭像

AI 讓大頭貼升級!pfp.fm 將你的照片轉換成 3D、漫畫、日本動漫風格頭像

免費線上圖片最佳化神器 MAZANOKE:即時壓縮、調整大小、轉檔,無需上傳檔案

免費線上圖片最佳化神器 MAZANOKE:即時壓縮、調整大小、轉檔,無需上傳檔案

This Person Does Not Exist:AI 隨機人臉產生器,自訂性別年齡可下載圖片

This Person Does Not Exist:AI 隨機人臉產生器,自訂性別年齡可下載圖片

Linustock 免費插圖素材:日系線條與彩色插圖,支援商用下載

Linustock 免費插圖素材:日系線條與彩色插圖,支援商用下載

訂閱更新

站內搜尋

最新文章

  • BlackWhite Pictures:免費高畫質黑白照片圖庫,商業用途免授權
  • AI 讓大頭貼升級!pfp.fm 將你的照片轉換成 3D、漫畫、日本動漫風格頭像
  • Kongear:AI 韓文空耳歌詞網站,K-pop 歌迷必備工具推薦
  • FrameGrab 免費線上影片縮圖工具:免上傳、快速擷取預覽圖
  • 雞來客棧 Glike:用 LINE 找附近停車場,即時顯示剩餘車位與費率資訊
  • 關於本站
  • 文章彙整
  • 聯絡我們
  • 隱私權政策

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

×