iOS中iconfont的基本使用

第一步:從iconfont平臺(tái)選擇要使用到的圖標(biāo),并下載至本地

動(dòng)圖.gif

第二步:打開從iconfont平臺(tái)下載下來(lái)的文件,并在目錄中打開demo_unicode.html,找到圖標(biāo)相對(duì)應(yīng)的 HTML 實(shí)體字符碼;
image.png

第三步:將從IconFont平臺(tái)下載的字體文件(.ttf)添加到工程中;

打開Info.plist文件,增加一個(gè)新的Array類型的鍵,鍵名設(shè)置為UIAppFonts(Fonts provided by application),增加字體的文件名:“iconfont.ttf“


image.png

第四步:使用IconFont字體:

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 50, 250, 100)];
    label.numberOfLines = 0;
    label.textColor = [UIColor redColor];
    label.font = [UIFont fontWithName:@"iconfont" size:30];
    label.text = @"\U0000e6ec \U0000e6f2 \U0000e6f4 \U0000e6f5 \U0000e6f7 哈哈哈";
    [self.view addSubview:label];

其中fontWithName中的名稱可以從之前打開的html文件中查找


image.png

效果圖


Simulator Screen Shot - iPhone 8 Plus - 2017-12-01 at 18.18.42.png

其中還有一點(diǎn)需要主要一下:
· 文本值為 8 位的 Unicode 字符,我們可以從第一張圖中找每個(gè)圖標(biāo)所對(duì)應(yīng)的 HTML 實(shí)體 Unicode 碼,比如: "掃一掃" 對(duì)應(yīng)的 HTML 實(shí)體 Unicode 碼為:&#xe6ec,我們只取圈起來(lái)的四個(gè),即轉(zhuǎn)換后為:\U0000e6ec 就是用\U 加圈起來(lái)的四個(gè)中間用 0 填補(bǔ)滿長(zhǎng)度為 8 個(gè)字符

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • iconfont是阿里旗下的矢量圖標(biāo)庫(kù),因?yàn)槭噶繄D標(biāo)放大縮小不失真,以及其方便修改,容量小等特點(diǎn)被廣泛使用。接下來(lái)...
    hibigger閱讀 1,838評(píng)論 0 2
  • 什么是Iconfont 我們通??吹降膱D標(biāo)都是以圖片形式集成到項(xiàng)目中使用,而 Iconfont 是一套字體圖標(biāo),和...
    十秒_閱讀 3,491評(píng)論 1 14
  • 本文介紹的內(nèi)容對(duì)應(yīng)的Github項(xiàng)目地址:IconFontApp 上一節(jié)提到,如果項(xiàng)目中很多自定義的圖標(biāo),或者是各...
    javayhu閱讀 5,595評(píng)論 5 33
  • 步驟 1.在IconFont平臺(tái)上傳SVG圖片阿里巴巴矢量圖標(biāo) 2.下載iconfont字體庫(kù) 2.1 將您從Ic...
    iOS開發(fā)之FFmpeg閱讀 9,233評(píng)論 0 2
  • 風(fēng)蕭蕭時(shí)葉與枝干別離,飄飄而落;雨朦朦時(shí)葉與泥泥交融,同眠而棲。此時(shí)的空氣中亦是彌漫著冷冽的氣息,讓人裹緊了衣角又...
    浪子衍閱讀 368評(píng)論 0 0

友情鏈接更多精彩內(nèi)容