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

更新時間:2021-11-23 來源:黑馬程序員瀏覽量:

IT培訓(xùn)班

在移動App開發(fā)中，經(jīng)常應(yīng)用到各種圖標(biāo)，為此ionic提供了ionicons圖標(biāo)樣式庫。ionicons采用TrueType字體實現(xiàn)圖標(biāo)樣式，有超過500個圖標(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)集可以通過訪問網(wǎng)址bttp：//ionicons.com/來查找。單擊某個圖標(biāo)后，會顯示具體圖標(biāo)需要添加的類名，如圖9-11所示。

1637716966614_圖標(biāo).jpg

圖9-11 lonic 圖標(biāo)集

為了有更好的理解，接下來通過一個案例來演示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行定義了一個Header 區(qū)域；第12行添加了搜索圖標(biāo)：第13行添加了搜索框，訪問頁面后圖標(biāo)會顯示在搜索框內(nèi)文字的前面。使用Chrome瀏覽器訪問demo9-7.html,頁面效果如圖9-12所示。

1637651971338_搜索框.jpg