AmazeUI 图标的示例代码


Posted in HTML / CSS onAugust 13, 2020

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 图标的示例代码

到此这篇关于AmazeUI 图标的示例代码的文章就介绍到这了,更多相关AmazeUI 图标内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3过渡_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 HTML / CSS
html实现弹窗的实例
Jun 09 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 #HTML / CSS
AmazeUI 网格的实现示例
Aug 13 #HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 #HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 #HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 #HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 #HTML / CSS
在html页面中取得session中的值的方法
Aug 11 #HTML / CSS
You might like
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
php session_decode函数用法讲解
2019/05/26 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
IE无法设置短域名下Cookie
2010/09/23 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
Python之re操作方法(详解)
2017/06/14 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
岗位职责定义及内容
2013/11/08 职场文书
大学毕业后的十年规划
2014/01/07 职场文书
简短大学毕业感言
2014/01/18 职场文书
餐厅筹备计划书
2014/04/25 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
大一新生期末自我评价
2014/09/12 职场文书
计算机实训报告总结
2014/11/05 职场文书
高三语文复习计划
2015/01/19 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
离婚案件答辩状
2015/05/22 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书