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

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

IT培訓班

在移動App開發(fā)中，經(jīng)常應(yīng)用到各種圖標，為此ionic提供了ionicons圖標樣式庫。ionicons采用TrueType字體實現(xiàn)圖標樣式，有超過500個圖標可供選擇。

ionic中可以在任意HTML元素上定義圖標，步驟如下。

①.icon：將元素聲明為圖標。

②.ion-{icon-name}：聲明要使用的具體圖標樣式。

例如聲明搜索圖標的基本格式如下。

<any class="icon lon-nearch"></any>

官方提供的 ionic 圖標集可以通過訪問網(wǎng)址bttp：//ionicons.com/來查找。單擊某個圖標后，會顯示具體圖標需要添加的類名，如圖9-11所示。

1637716966614_圖標.jpg

圖9-11 lonic 圖標集

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

1637651971338_搜索框.jpg