刘月林 | jQuery UI API - 图标（Icons）

  • 通过修改 ui-icon- 来修改 icon 的 shape

参考

ui-icon 列表

实例

ui-icon 展示实例

源码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
    <h1>欢迎访问我的主页</h1>
    <a href="#" class="ui-btn  ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a>
  </div>

   <div data-role="main" class="ui-content">
    <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
  </div>
    
    <div data-role="footer" style="text-align:center"> 
        <a href="#" class="ui-btn  ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">关注</a>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-comment ui-btn-icon-left" >评论</a>
        <a href="#" class="ui-btn  ui-corner-all ui-shadow ui-icon-check ui-btn-icon-left">转发</a>
    </div>
</div>

</body>
</html>

  • 通过修改 ui-btn-icon- 来修改 icon 在 ui-btn 里面的位置

展示

image

  • ui-icon 展示实例1.01

image

源码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header" data-position = "fixed" data-fullscreen = "true">
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
    <h1>欢迎访问我的主页</h1>
    <a href="#" class="ui-btn  ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a>
  </div>

   <div data-role="main" class="ui-content">
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
       
       
    </div>
    
    <div data-role="footer" data-position = "fixed" data-fullscreen = "true" style="text-align:center"> 
        <a href="#" class="ui-btn  ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">关注</a>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-comment ui-btn-icon-left" >评论</a>
        <a href="#" class="ui-btn  ui-corner-all ui-shadow ui-icon-check ui-btn-icon-left">转发</a>
    </div>
</div>

</body>
</html>

刘月林
写于浙江宁波
2018/08/29

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容