这篇文章主要介绍了AmazeUI 图标的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。本文主要介绍了AmazeUI 图标的示例代码，具体如下：

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图标</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body style="margin: 50px;">
<!--添加 Class-->
<span class="am-icon-qq"> QQ</span>
<span class="am-icon-weixin"> Wechat</span>
<!--图标大小-->
<p><span class="am-icon-home"></span> 默认大小</p>
<p><span class="am-icon-home am-icon-sm"></span> .am-icon-sm</p>
<p><span class="am-icon-home am-icon-md"></span> .am-icon-md</p>
<p><span class="am-icon-home am-icon-lg"></span> .am-icon-lg</p>
<!--Icon button-->
<a href="##" class="am-icon-btn am-icon-twitter"></a>
<a href="##" class="am-icon-btn am-icon-facebook"></a>
<a href="##" class="am-icon-btn am-icon-github"></a>
<a href="##" class="am-icon-btn am-primary am-icon-qq"></a>
<a href="##" class="am-icon-btn am-secondary am-icon-drupal"></a>
<a href="##" class="am-icon-btn am-success am-icon-shield"></a>
<a href="##" class="am-icon-btn am-warning am-icon-warning"></a>
<a href="##" class="am-icon-btn am-danger am-icon-youtube"></a>
<!--旋转动画-->
<i class="am-icon-spinner am-icon-spin"></i>
<i class="am-icon-refresh am-icon-spin"></i>
<i class="am-icon-circle-o-notch am-icon-spin"></i>
<i class="am-icon-cog am-icon-spin"></i>
<i class="am-icon-gear am-icon-spin"></i>
<i class="am-icon-spinner am-icon-pulse"></i>
<!--固定宽度-->
<ul>
<li><i class="am-icon-qq am-icon-fw"></i> QQ</li>
<li><i class="am-icon-skype am-icon-fw"></i> Skype</li>
<li><i class="am-icon-github am-icon-fw"></i> GitHub</li>
<li><i class="am-icon-cc-amex am-icon-fw"></i> Amex</li>
</ul>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</body>
</html>

效果图：

AmazeUI 图标的示例代码相关推荐

  1. html 右上角删除图标,网页制作html+css制作div标签增加右上角删除图标的示例代码...

    一.需求描述 在Div标签的右上角显示删除图标 二.实现方式 html.CSS 三.参考代码 .container{ width:60px; height:60px; border: 1px dott ...

  2. html 右上角删除图标,html+css制作div标签增加右上角删除图标的示例代码_CSS

    一.需求描述 在Div标签的右上角显示删除图标 二.实现方式 html.CSS 三.参考代码 .container{ width:60px; height:60px; border: 1px dott ...

  3. 在哪里能收到python实例代码-python实现网站微信登录的示例代码

    最近微信登录开放公测,为了方便微信用户使用,我们的产品也决定加上微信登录功能,然后就有了这篇笔记. 根据需求选择相应的登录方式 python实现网站微信登录的示例代码 微信现在提供两种登录接入方式 移 ...

  4. 01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例

     1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...

  5. element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码

    一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...

  6. 通过调试微信小程序示例代码解析flex布局参数功能(一)

    通过调试微信小程序示例代码解析flex布局参数功能 官方示例小程序源代码下载地址:https://github.com/wechat-miniprogram/miniprogram-demo 通过调试 ...

  7. C#dataGridView 知识(示例代码)以及相关的经验技巧

    一.单元格内容的操作 // 取得当前单元格内容 Console.WriteLine(DataGridView1.CurrentCell.Value); // 取得当前单元格的列 Index Conso ...

  8. 公众号分享页面php,微信公众号网页分享功能开发的示例代码

    现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接: 上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的 ...

  9. 搜索导航HTML,CSS 带搜索导航栏的示例代码

    本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏. 以下实例均是响应式的. 可以先看下效果图: 创建一个搜索栏 主页 关于 联系我们 /* 在顶部导航栏中添加黑色背景颜色 */ .topnav ...

  10. ABOV单片机UART串口通讯实现讲解及示例代码-[MC96F6332D]

    一.准备工作 1.KEIL C51编译环境 2.CodeGen8 代码生成器 3.MC96F6332D 开发板 4.USB-OCD II仿真器 二.生成串口通讯代码 1.在CodeGen8 代码生成器 ...

最新文章

  1. MySQL--使用innodb_force_recovery修复数据库异常
  2. Linux的关机与重启命令
  3. 数论初步——同余与模算术
  4. 《深入理解java内存模型》学习整理1
  5. 【原创】C# war3 巨魔精灵 minimap
  6. 在J2SE应用程序中模拟CDI的会话和请求范围
  7. linux批量去掉文件名前缀,linux 批量删除某个前缀文件
  8. Java的string学习笔记 与char数组和bufferstring的比较
  9. @column注解_Java 注解及其在 Android 中的应用
  10. 强悍的Google Earth
  11. 复旦nlp实验室 nlp-beginner 任务一：基于机器学习的文本分类
  12. [渝粤教育] 中国农业大学 大学计算机基础 参考 资料
  13. FPGA的学习：TFT_LCD液晶屏字符显示
  14. 游戏党福音，Google play游戏明年登录Windows
  15. logistic回归分析优点_机器学习实战项目-Logistic回归
  16. 2021哪款蓝牙耳机好？音质、颜值顶尖的五款优秀蓝牙耳机推荐
  17. 首次申请测绘资质需要提交哪些材料？
  18. SAP FICO 付款及清账解析
  19. NOR flash 坏块处理方法
  20. 国外主流搜索引擎提交入口

热门文章

  1. linux查看服务进程发包,11月18日linux服务器后，服务器向外发包，CPU达99%以上
  2. PHP连接mysql数据库报错：Call to undefined function mysql_connect()
  3. Adobe Bridge 2020新增功能
  4. 联想小新电脑摄像头黑屏、检测不到设备、指示灯不亮解决方案
  5. 微信小程序商城有发展机会吗？
  6. [供应链·案例篇]疫情影响下的全球十大零售商都做了些什么
  7. codesmith oracle 64,CodeSmith OracleModel写法
  8. 代码运行：CornerNet源码
  9. Topaz Plugins Bundle 2018 for Mac(PS插件滤镜特效包)
  10. ST7789-TFT屏幕驱动（整理有stm32/51单片机/arduino等驱动代码）