这篇文章主要介绍了AmazeUI图标的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
惊艳用户界面面向HTML5开发,使用CSS3来做动画交互,平滑、高效,更适合移动设备,让蜘蛛网应用更快速载入。本文主要介绍了AmazeUI图标的示例代码,具体如下:
!声明文档类型
html class='no-js '
头
meta charset='utf-8 '
元http-equiv=' X-UA-兼容'内容='IE=edge '
元名称='描述'内容=' '
元名称='关键字'内容=' '
元名称='视口'内容='宽度=设备宽度,初始比例=1 '
标题图标/title
meta name=' renderer ' content=' web kit '
元http-equiv='缓存-控制'内容='no-siteapp'/
link rel=' icon ' type=' image/png ' href=' assets/I/fav icon。png '
meta name=' mobile-web-app-ability ' content=' yes '
link rel=' icon ' size=' 192 x 192 ' href=' assets/I/app-icon 72 x72 @ 2x。png '
meta name=' apple-mobile-web-app-ability ' content=' yes '
meta name=' apple-mobile-web-app-status-bar-style ' content=' black '
meta name=' apple-mobile-web-app-title ' content='拍案惊奇UI'/
link rel=' apple-touch-icon-precompted ' href=' assets/I/app-icon 72 x72 @ 2x。png '
meta name=' ms application-Tileimage ' content=' assets/I/app-icon 72 x72 @ 2x。png '
元名称=' ms应用程序-TilColor '唐山应用开发内容='#0e90d2 '
链接rel='样式表href=' assets/CSS/amazeui。量滴' CSS '
/head
body style=' margin: 50px '
!-添加班级-
span class='am-icon-qq' QQ/span
span class='am-icon-weixin '微信/span
!-图标大小-
pspan class='am-icon-home'/span默认大小/p
PS pan class=' am-icon-home am-icon-sm '/span .am-icon-sm/p
PS pan class=' am-icon-home am-icon-MD '/span .am-icon-md/p
PS pan class=' am-icon-home am-icon-LG '/span .am-icon-lg/p
!-图标按钮-
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
!-旋转动画-
我喜欢'我是-图标-旋转者我是-图标-脊柱'/我