iconfont在react中完整使用教程

mylxsw 發(fā)布于2019-08-30 11:07 / 1714人閱讀

摘要：查閱部分文件，找到相關(guān)資料，發(fā)現(xiàn)是在純頁面中導(dǎo)入是完全的。但是請注意，咱們將靜態(tài)資源放置在目錄下，中的不可采用。于是，正確做法如下在文件下的或者等文件中寫入如下語句即可。第四步介紹使用方法待我研究去吧。。。

hello,各位小伙伴們，很久沒寫文章了。
突然要自己搭建項目了，項目中對于阿里巴巴iconfont的使用，大家都清楚嗎？

第一步：將圖標(biāo)加入購物車

第二步：將圖標(biāo)下載到本地,將如下文件放置在react項目中assets目錄下

第三步：導(dǎo)入iconfont.css到項目目錄，鄙人踩坑點在此。
查閱部分文件，找到相關(guān)資料，發(fā)現(xiàn)是在純html頁面中導(dǎo)入是完全OK的。

但是請注意，咱們將靜態(tài)資源放置在src目錄下，public中的index.html不可采用。
于是，正確做法如下：
在src文件下的index.js或者app.js等文件中寫入如下語句即可。
import "./assets/fonts/iconfont.css";

第四步：介紹使用方法

unicode: 
font-class:
symbol:待我研究去吧。。。

備注：
如果發(fā)現(xiàn)頁面沒有更新，可以重啟一下服務(wù)。
以上就是關(guān)于iconfont的介紹了，大家可以踴躍查閱資料，在此希望能夠給到小伙伴們一些幫助呀！

GPU云服務(wù)器云服務(wù)器 iconfont使用在php中使用組件在VBScript中使用類 webrtc在webview中使用問題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114785.html

相關(guān)文章

iconfont在react中完整使用教程

摘要：查閱部分文件，找到相關(guān)資料，發(fā)現(xiàn)是在純頁面中導(dǎo)入是完全的。但是請注意，咱們將靜態(tài)資源放置在目錄下，中的不可采用。于是，正確做法如下在文件下的或者等文件中寫入如下語句即可。第四步介紹使用方法待我研究去吧。。。 hello,各位小伙伴們，很久沒寫文章了。突然要自己搭建項目了，項目中對于阿里巴巴iconfont的使用，大家都清楚嗎？第一步：將圖標(biāo)加入購物車 showImg(https://...

Prasanta 2019-08-23 18:03 評論0 收藏0
在react-native中添加高可維護的iconfont字體

摘要：沒關(guān)系，筆者已經(jīng)為你們準(zhǔn)備好了，請保存到文件中，假設(shè)你的文件名叫和你剛才保存的字體文件在一起，方便管理復(fù)制字體這個插件包有好多套字體，我們可以需要把自己的也復(fù)制到包中對應(yīng)文件夾，當(dāng)然了，不可能手動復(fù)制，筆者從來都是解放雙手的。字體圖標(biāo)盛行的年代，在項目里使用一套不失真又可以隨意改變大小顏色的圖標(biāo)，是多么舒服的一件事。這里要推薦iconfont.cn，超多免費圖標(biāo)，當(dāng)然了，你的專屬美工...

CarterLi 2019-08-26 12:00 評論0 收藏0
在 React Native 使用阿里 iconfont 圖標(biāo)

摘要：熟悉前端開發(fā)的大家都一定知道，在網(wǎng)站下載圖標(biāo)集，會自帶教程告訴你如何在網(wǎng)頁使用。但是在中，跟網(wǎng)頁使用的步驟就不同了。熟悉前端開發(fā)的大家都一定知道 iconfont.cn，在網(wǎng)站下載圖標(biāo)集，會自帶教程告訴你如何在網(wǎng)頁使用 iconfont。但是在 React Native 中，跟網(wǎng)頁使用的步驟就不同了。我最開始百度出來的文章，不少都推薦借用 react-native-vector-ic...

young.li 2019-08-23 12:42 評論0 收藏0
前端學(xué)習(xí)資源整理

稍微整理了一下自己平時看到的前端學(xué)習(xí)資源，分享給大家。 html MDN：Mozilla開發(fā)者網(wǎng)絡(luò) SEO：前端開發(fā)中的SEO css 張鑫旭：張鑫旭的博客 css精靈圖：css精靈圖實踐柵格系統(tǒng)：詳解CSS中的柵格系統(tǒng) 媒體查詢：css媒體查詢用法 rem布局：手機端頁面自適應(yīng)布局移動前端開發(fā)之viewport的深入理解:深入理解viewport 淘寶前端布局：手機淘寶移動端布局 fl...

siberiawolf 2019-08-21 11:27 評論0 收藏0