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实现图片模糊过滤效果
Nov 19 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
CSS基础详解
Oct 16 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
php加密解密实用类分享
2014/01/07 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
PHP速成大法
2015/01/30 PHP
php制作文本式留言板
2015/03/18 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
ASP SQL防注入的方法
2008/12/25 Javascript
javascript 获取图片颜色
2009/04/05 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
python读取LMDB中图像的方法
2018/07/02 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
flask框架路由常用定义方式总结
2019/07/23 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
python设置中文界面实例方法
2020/10/27 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
医学专业毕业生个人求职信
2013/12/25 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
公司活动方案范文
2014/03/06 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
语文复习计划
2015/01/19 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书