tag iconfont

標籤
貢獻14
77
04:58 PM · Nov 05 ,2025
shuirongshui 頭像 yiguxing_6145d78a839c9 頭像 whjin 頭像 nulidexiaocongmang 頭像 hanbo_bo 頭像 kobe_fans_zxc 頭像 himushroom 頭像 linvic 頭像 gracetangyi 頭像 liane 頭像 tosmile 頭像 ineo6 頭像

@iconfont / 博客 RSS 訂閱

shuirongshui 頭像

水冗水孚 - 微信小程序項目中使用iconfont步驟流程（Font class方式）

本文記錄一下在小程序項目中使用iconfont-阿里巴巴矢量圖標庫的步驟流程，忘了時候可以看看 第一步，訪問網站並登錄 網站地址：https://www.iconfont.cn/ 登錄（註冊）略過... 第二步，搜索所需圖標，並加入購物車 圖一： 圖二： 圖三： 圖四： 第三步，選擇Font class形式，並生成代碼 圖一： 圖二： 圖三：

微信小程序 , iconfont

收藏 評論

yiguxing_6145d78a839c9 頭像

意孤行 - vue3使用iconfont

1.首先登陸阿里雲矢量圖標庫，把需要的字體圖標加入到自己的項目中 2.將項目下載到本地，並解壓到項目中 3.在vue項目下的資源文件夾下新建iconfont文件夾，將下載後的文件解壓將一下文件拷貝到項目的iconfont文件夾下， 4.在main.ts中引入iconfont.css和iconfont.js，如果不使用多色圖標的話可以不用引入iconfont.js文件 import

iconfont , vue3 , 前端

收藏 評論

whjin 頭像

寒青 - 我的技能樹

1. Uni-App 2. WebSocket 3. Canvas 4. Less 5. Sass 6. Axios 7. SVG 8. SocketIO 9. ElementPlus 10. WebRTC

技能樹 , iconfont , icon

收藏 評論

nulidexiaocongmang 頭像

MangoGoing - react native項目中使用iconfont

前言 react native項目中經常會用到icon，react-native-vector-icons字體庫解決了一部分icon的需求，但是還有一部分設計師給的icon需要在iconfont自行引用，關於使用react-native-vector-icons遇到的坑在之前的文章提到過react native新建項目踩坑記錄（字體問題詳見問題五），主要是兩點： 不要link react-na

iconfont , react-native

收藏 評論

hanbo_bo 頭像

hanbo_bo - 矢量圖使用

本案例是以vue3為案例的框架 在main.ts中全局引入圖標樣式 可以在 iconfont.css中查看自己圖標的名稱 最後可以使用 i 標籤 通過class類名使用 效果：

iconfont

收藏 評論

kobe_fans_zxc 頭像

高級BUG開發 - vue項目中使用unicode引入iconfont，動態生成圖標的問題。

vue項目中，採用unicode引入iconfont，如果靜態寫圖標是可以正常渲染的 i class="iconfront"#734;/i 但是如果從接口獲取數據，直接渲染字符串 i class="iconfront"{{myIcon}}/i 最後發現使用v-html渲染就可以了 i class="iconfront" v-html="myIcon"/i

vue.js , iconfont

收藏 評論

himushroom 頭像

himushroom - pixijs使用iconfont字體圖標（以及Bitmap font generator使用不完全指北）

話不多説先放實現代碼↓ const app = new PIXI.Application({ backgroundColor: 0x777777 }); document.body.appendChild(app.view); // 將iconfont提供的字符轉換為中文 const toFontIcon = (unicode) = { if (unicode === "") return

iconfont , pixijs , webgl , 前端 , Javascript

收藏 評論

linvic 頭像

linvic - 在ant-design-vue項目中全局引入iconfont字體圖標

在main.js中 import { Icon } from 'ant-design-vue'; const IconFont = Icon.createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', }); // 全局註冊 IconFont 組件 Vue.component('IconFo

iconfont , antd-vue

收藏 評論

gracetangyi 頭像

Grace糖衣 - 聊一聊 iconfont

聊一聊 iconfont 簡述 iconfont 把圖標用字體的方式呈現 把大量的圖標變成了一個字體文件，減少了請求數，而且有效減小請求體積。當一個網頁有自己的圖標字體庫之後，可以複用在很多地方，減少很多二次開發成本 為什麼使用iconfont? 1.兼容性最好，支持ie6+ 2.矢量圖形，可伸縮 使用方式 1.登錄:http://www.iconfont.cn/ 2.找到圖標管理-我

iconfont

收藏 評論

liane 頭像

Liane - iconfont使用及webpack打包字體圖標

一、iconfont使用 官網：https://www.iconfont.cn/ 1、找到需要的icon圖標，添加至購物車 2、購物車中點擊添加至項目，可加入到GitHub的項目中,也可直接下載到本地 3、引用圖標 unicode引用 unicode是字體在網頁端最原始的應用方式，特點是： 兼容性最好，支持ie6+，及所有現代瀏覽器。 支持按字體的方式去動

iconfont , webpack , 前端

收藏 評論

tosmile 頭像

浪遏飛舟 - Sass將Unicode編譯成文字字符導致icon亂碼問題

發現問題 最近在使用公司組件庫中的穿梭框組件時發現icon圖標全都亂碼了 分析問題 經排查發現，組件樣式文件（scss）引入的iconfont矢量圖標字體，構建時，\e601這類Unicode字符在經過sass編譯後就變成了文字字符（雙字節字符），導致出現亂碼 .icon-ok:before { content: "\e601"; } Sass編譯後 .icon-ok:before {

iconfont , sass , loader , plugin , unicode

收藏 評論

ineo6 頭像

ineo6 - GitMaster 是如何定製 file-icons/atom

GitMaster裏面展示項目結構時，同時也顯示了對應的icon。 看起來和Octotree是沒什麼區別，但其實在維護和更新上是有顯著區別的。 Octotree是直接從file-icons/atom複製相關樣式和字體文件到項目裏，這樣耦合的方式很不利於維護，所以我在處理文件圖標時進行了額外的處理，把所有文件圖標通過npm包的形式引入。 大家可能好奇為什麼不直接用file-icons/atom，沒有

ast , iconfont , less , atom , npm

收藏 評論

thosefree 頭像

搬不要錢的磚 - Ionicons - Ionic 出品的免費開源、高性能圖標庫，適用於 web / APP / 桌面應用

Ionic Framework 內置的圖標庫，免費開源、數量多，性能還不錯，無論是開發還是設計，都是一個優質的資源。 關於 Ionicons Ionicons 是一個完全開源的圖標集，是知名混合開發框架 Ionic Framework 內置的圖標庫，包含 1300 個為 Web / iOS / Android 和桌面應用程序專門定製的圖標。Ionic Framework 是一個跨平台的混合

ionic , iconfont , Css , svg

收藏 評論

yangxiansheng_5a1b9b93a3a44 頭像

羊先生 - 如何在uni-app使用iconfont字圖標

添加圖標 打開，https://www.iconfont.cn/ 網站，找到自己的喜歡的圖表加入到項目中 下載本地 點擊下載至本地 拷貝文件 將iconfont.css，iconfont.woff,iconfont.woff2 複製到自己的項目中， 打開iconfont.css文件，我需要去編輯框框的地方 資源轉換 uni-app 字體文件小於 40kb，uni-app 會自動將其轉化為

iconfont , 字體 , webapp , uni-app , 前端

收藏 評論