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 选择器 伪类选择器介绍
Jan 21 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
iframe与window.onload如何使用详解
May 07 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函数学习之PHP函数点评
2012/07/05 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
python从ftp下载数据保存实例
2013/11/20 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
详解python pandas 分组统计的方法
2019/07/30 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
python里反向传播算法详解
2020/11/22 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
课外活动总结范文
2014/07/09 职场文书
优秀班组事迹材料
2014/12/24 职场文书
售后服务承诺函格式
2015/01/21 职场文书
暑期社会实践个人总结
2015/03/06 职场文书