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的loading动画加载相关的transition优化
May 18 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
详解盒子端CSS动画性能提升
May 24 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
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
python循环监控远程端口的方法
2015/03/14 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
python绘制随机网络图形示例
2019/11/21 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
python 线程的五个状态
2020/09/22 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
中国世界遗产导游词
2015/02/13 职场文书
总结会主持词
2015/07/02 职场文书
如何写通讯稿
2015/07/22 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android