ionic如何實(shí)現(xiàn)圖標(biāo)類樣式？

更新時(shí)間:2021-11-23 來(lái)源:黑馬程序員瀏覽量:

IT培訓(xùn)班

在移動(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所示。

1637716966614_圖標(biāo).jpg

圖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所示。

1637651971338_搜索框.jpg