Fontastic 免費網頁圖示字型（Icon Fonts）產生器 - 免費資源 ...

Fontastic 是一個很強大的Icon Font 產生器，使用方法是選擇你要運用到網頁裡的圖示，設定好調用的前置詞，網站就會依照你選取的圖示產生TTF、SVG、EOT、WOFF 四種字型檔案 ... 跳至主要內容 FacebookTwitterPinterestLineShare 對於網頁開發來說，運用圖示的方式已經不同於以往，早期可能會在每次使用圖示時載入一次圖檔，這麼做不但很難維護，而且會影響到開啟網頁的速度，後來逐漸使用 CSSSprites方式把圖示全部組合起來，近期比較流行的則是以IconFont圖示字型，將小圖示製作成字型檔，好處是能提升網站的整體美感，加速網站開啟速度，後續的調整上更為輕鬆，也能在行動裝置、Retina顯示器上獲得最佳效果。

不過不是每個人都知道要如何製作IconFont，當然網路上也不少現成的可以使用，但你需要的可能是專為你的網站、專案所部屬的圖示字型，而不需包含一堆你用不到的圖案，這時候就可以運用Fontastic來客製化。

Fontastic是一個很強大的IconFont產生器，使用方法是選擇你要運用到網頁裡的圖示，設定好調用的前置詞，網站就會依照你選取的圖示產生TTF、SVG、EOT、WOFF四種字型檔案，將它們製作成你的專用的字型，再依照網站提供的CSS程式碼與參考頁面說明，就能在網頁裡運用這些圖示。

網站名稱：Fontastic 網站鏈結：https://fontastic.me/ 使用教學 從Fontastic首頁填入Email及密碼後，即可建立你的帳戶，登入開始選擇你要使用的圖示，Fontastic預設提供許多免費圖示可供選擇，也有一些需付費的圖示集。

選擇圖示後，外框會以黃色來呈現，再點一下可以取消選取。

點擊上方的Customize來自訂每個圖示的CharacterMapping，稍後就可以用CSS方式快速調用出這個圖案，此外，也可以自訂CSSClassMapping，設定比較容易記憶或使用的規則，能加速使用者在開發或製作網頁專案的速度。

點擊Download可以下載Fontastic所產生的IconFont，會依照你選取的圖示製作成一個字型。

不知道如何使用嗎？沒關係，Fontastic提供了兩種調用字型圖示的教學，都會顯示在Download頁面下方，只要依照教學，複製CSS程式碼到你的網站裡，就能在網站的適當位置運用IconFont。

我也試著以Fontastic製作了一個IconFont，整體效果非常好喔！如果你有需要更換顏色、加入陰影，或是外框等等，也可以透過CSS方式來做調整設定。

相關文章 FontSpark找尋字型靈感工具，隨機套用英文字體即時線上預覽 IcoMoonApp收錄5500個免費向量圖示，選取下載SVG、PNG圖示字型 IcoFont超過2000個免費SVG圖示字型下載 Favic-o-Matic快速裁切、製作各種尺寸大小的Favicon網站圖示 使用電子郵件訂閱網站 輸入你的電子郵件地址訂閱網站更新，使用電子郵件接收通知。

電子郵件地址 訂閱更新 追蹤更新 站內搜尋搜尋 文章分類文章分類 選取分類 10MB-50MB 1GB以上 200MB-500MB 500MB-1GB 50MB-200MB Alexa PageRank 個人服務 個人網誌 光碟工具 免費DNS 免費圖片 免費圖示 免費程式（PHP） 免費空間 免費論壇 免費贈品 免費軟體 可攜軟體 商業軟體 圖片工具 圖片空間 圖片編輯 圖示製作 好康資訊 好玩遊戲 字型下載 實用教學 工具類 影音工具 影音空間 微型網誌 手機APP 手機相關 投票服務 折價券區 搜尋引擎 搜尋引擎最佳化 搜尋引擎登錄 教育類 文書處理 新聞資訊類 星座算命 書籤整合 架站資源 查詢資料 桌布下載 檔案管理 流量統計 熱門主題 生活類 產生器類 留言板類 系統工具 素材模版 網站公告 網站模板 網站監測 網站空間 網站線上人數 網站縮圖 網站評鑑 網站轉址 網站配色 網誌物件 網路書籤 網路相簿 網路相關 網路科技 網路賺錢 網路遊戲 網頁素材 線上代理 線上動漫 線上問卷 線上地圖 線上字典 線上工具 線上廣播 線上掃毒 線上翻譯 線上轉檔 編輯推薦 縮短網址 贊助評論 趣味網站 遊戲類 開源程式 防毒軟體 雜七雜八 電子信箱 電子賀卡 音樂空間 音樂音效 預設分類 贊助商連結 最新文章Jotti免費惡意程式掃描工具，整合14種防毒引擎可偵測單檔最大250MB Maildax兼具安全、匿名暫時信箱，產生密鑰可重複存取相同郵件地址 薄荷圖床：免費圖片轉網址服務，中國模式可將圖片上傳香港伺服器 UTM免費Mac虛擬機器應用程式，可在M1CPU安裝Windows11 Hama清除照片裡的人物或物品，可反覆編輯沒有圖片大小限制 CandidateChecker以帳號或Email查詢特定對象使用那些社群網路服務 NewProfilePic使用人工智慧將個人大頭貼轉為美式畫風 AdobeRemoveBackground免費線上去背工具，全自動移除相片背景 YouTubePremium跨區訂閱教學，阿根廷、印度家庭方案價格最便宜 OpenRA開源即時戰略遊戲，紅色警戒、終極動員令、沙丘魔堡免費下載 精選主題 行政院1922簡訊實聯制掃碼發送簡訊登記，店家註冊QRCode教學思源黑體：Adobe與Google合作開發開放原始碼中文字型思源宋體NotoSerifCJK字型免費下載！Google、Adobe再次攜手推出開放原始碼字體Mipony白馬下載器：網路下載必裝！支援數百免空可突破下載限制Spotify免費聆聽4000萬首歌，音樂串流應用iOS、Android版下載日本亞馬遜AmazonGlobal線上購物直送台灣，免消費稅免找代購中華郵政i郵箱初體驗，24小時自助郵局寄件取件超方便YouTubeMusic免費音樂串流服務正式登場，升級Premium零廣告體驗MicrosoftEdge正式版免費下載！以Chromium重新打造微軟瀏覽器Photopea免費圖片編輯器，堪稱Photoshop線上版支援PSD等常見格式財政部統一發票兌獎APP掃描發票存手機，自動記帳主動對獎超方便使用健保卡+戶號線上查詢勞保勞退年資、應繳欠繳保費和退休金核發試算YouTubeKids兒童專用影音頻道，手機平板應用程式免費下載Disney+台灣影音串流平台訂閱付款教學，最多可四螢幕同時觀看以Outline搭配DigitalOcean架設VPN伺服器教學，每月最低5美元起 實用教學 15個免費下載高解析度圖片最佳圖庫下載高畫質相片素材的13個免費圖庫資源精選12個你應該知道的中英文假字、文章產生器20個免費下載創用CC授權音樂的網站彙整40個設計師必備免費資源超推懶人包Facebook全新下載資料副本功能，一次備份所有臉書記錄匯出Instagram資料下載讓使用者完整備份相片影片、留言、訊息等個人記錄7個線上接收手機簡訊驗證碼的免費網路服務整理PayPal兩步驟驗證設定教學，以手機簡訊或應用程式降低被盜用風險如何在瀏覽器不支援AdobeFlashPlayer後繼續播放SWF檔案？7-11賣貨便操作教學，整合多種付款方式、固定運費優惠全家好賣+使用教學，賣場註冊、商品上架、手續費和運費優惠說明8個匿名偷看IG限時動態不留下觀看紀錄的網路服務整理 WordPress架站資源 自架WordPress虛擬主機租用教學，將網誌備份匯出、匯入到新家殺手級WordPress體檢項目：101個建立新網站的超簡易捷徑！Cloudflare架站者必備免費CDN、DNS託管服務設定教學16個免費網站速度測試工具推薦！網頁效能評比，搜尋引擎最佳化必備亞馬遜VPS服務AmazonLightsail搭配ServerPilot快速架設WordPress教學使用GoogleCloudPlatform雲端主機免費版架設WordPress教學使用Cloudways架設WordPress網站教學，快速部屬最佳化環境RunCloud佈署最佳化主機環境，整合DigitalOcean架設WordPress教學使用SiteGround虛擬主機一鍵快速安裝WordPress教學FastComet評價極高的虛擬主機推薦，一鍵安裝WordPress教學VaultPress完整備份你的WordPress網站，無痛搬家或回復特定時間點WPRocket最強WordPress快取外掛，完整最佳化設定選項教學不續費虛擬主機？WordPress.com對應個人網域每年13美元搬家超划算 Close免費軟體 APP Mac 瀏覽器外掛 系統工具 圖片處理 文書編輯 線上工具 線上翻譯 線上轉檔 配色工具 縮網址 產生器 免費空間 網路硬碟 圖片空間 影片空間 網站空間 熱門主題 Facebook Instagram VPN YouTube 編輯推薦 免費圖庫 字型下載 網路科技 電子信箱 實用教學 資料查詢 免費圖示 音樂音效 架站資源 DNS WordPress SEO 素材模版 免費圖片 網站監測 站內搜尋搜尋 分享到...BufferCopyEmailFacebookFlipboardHackerNewsLineLinkedInMessengerMixPinterestPocketPrintRedditSMSTelegramTumblrTwitterVKWhatsAppXingYummly