react-native中使用自定義的字體圖標iconfont

iconfont圖標庫下載

可在 http://www.iconfont.cn 下載

下載完成后的目錄中有字體文件：

iconfont.ttf

拷貝字體文件

Android:

在 Android/app/src/main 目錄下新建文件夾 assets/fonts/
然后將iconfont.ttf文件拷貝到assets/fonts/目錄下

使用

在下載的字體文件夾中有demo_unicode.html文件
打開文件，在界面有顯示圖標以及對應的unicode碼值，如

• 在Text標簽中使用 
• 並設置style:{fontFamily : 'iconfont'}。如：

1	<Text style={{fontFamily:'iconfont'}}>&#xe697;</Text>

更方便的使用

在Text標簽中可以直接寫入 
但是如果要使用變量來表示，則不能使用同樣的字符串，需要使用對應的unicode字符串。
例如：
 應使用 \ue697來表示。

完整示例：

1 2	let back = '\ue697'; <Text style={{fontFamily:'iconfont'}}>{back}</Text>