更新時(shí)間:2021-11-23 來(lái)源:黑馬程序員 瀏覽量:
在移動(dòng)App開(kāi)發(fā)中,經(jīng)常應(yīng)用到各種圖標(biāo),為此ionic提供了ionicons圖標(biāo)樣式庫(kù)。ionicons采用TrueType字體實(shí)現(xiàn)圖標(biāo)樣式,有超過(guò)500個(gè)圖標(biāo)可供選擇。
ionic中可以在任意HTML元素上定義圖標(biāo),步驟如下。
①.icon:將元素聲明為圖標(biāo)。
②.ion-{icon-name}:聲明要使用的具體圖標(biāo)樣式。
例如聲明搜索圖標(biāo)的基本格式如下。
<any class="icon lon-nearch"></any>
官方提供的 ionic
圖標(biāo)集可以通過(guò)訪問(wèn)網(wǎng)址bttp://ionicons.com/來(lái)查找。單擊某個(gè)圖標(biāo)后,會(huì)顯示具體圖標(biāo)需要添加的類名,如圖9-11所示。
圖9-11 lonic 圖標(biāo)集
為了有更好的理解,接下來(lái)通過(guò)一個(gè)案例來(lái)演示ionic圖標(biāo)的使用效果,如demo9-7.html所示。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="vieuport" content="initial-scale=1, maximun-scale=1, user-scalable=no, width=device-width"> <title>ionic圖標(biāo)</title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> </head> <body> <div class="bar bar-header bar-energized item-input-Inset"> <label class=”item-input-wrapper”> <i class="icon lon-search" style="font-size: 20px"></i> <input type=“text”placeholder-“輸入用戶名搜索“> </label> </div> </body> </html>
在上述代碼中,第11~15行定義了一個(gè)Header 區(qū)域;第12行添加了搜索圖標(biāo):第13行添加了搜索框,訪問(wèn)頁(yè)面后圖標(biāo)會(huì)顯示在搜索框內(nèi)文字的前面。使用Chrome瀏覽器訪問(wèn)demo9-7.html,頁(yè)面效果如圖9-12所示。
猜你喜歡: