首页技术文章正文

ionic如何实现图标类样式?

更新时间:2021-11-23 来源:黑马程序员 浏览量:

IT培训班

在移动App开发中,经常应用到各种图标,为此ionic提供了ionicons图标样式库。ionicons采用TrueType字体实现图标样式,有超过500个图标可供选择。

ionic中可以在任意HTML元素上定义图标,步骤如下。

①.icon:将元素声明为图标。

②.ion-{icon-name}:声明要使用的具体图标样式。

例如声明搜索图标的基本格式如下。

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

官方提供的 ionic 图标集可以通过访问网址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 区域;第12行添加了搜索图标:第13行添加了搜索框,访问页面后图标会显示在搜索框内文字的前面。使用Chrome浏览器访问demo9-7.html,页面效果如图9-12所示。

1637651971338_搜索框.jpg

猜你喜欢:

什么是字体图标?有什么优势?

前端图标插件ECharts入门教程

JavaScript中修改元素内容怎样操作?

【前端】盒子模型的边框样式属性和应用技巧讲解

黑马程序员HTML前端与开发培训

分享到:
在线咨询 我要报名