`

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>	

效果图:

 

 

 

  • 大小: 19.5 KB
分享到:
评论

相关推荐

    基于AmazeUI的漂亮后台模板

    4. 图标:AmazeUI内置了一套图标库,包含大量矢量图标,可适应不同尺寸和颜色需求。 五、压缩包内容 "admin"这个文件可能是模板的主目录,其中可能包含了以下内容: 1. HTML文件:如index.html,是后台首页; 2. ...

    AmazeUI模板

    4. 图标资源:AmazeUI提供了一套矢量图标,这些图标通常以.svg或.png格式存在,可用于导航栏、按钮等元素,提升界面的视觉效果。 5. 示例图片和数据:为了展示模板的完整效果,压缩包中可能包含示例图片和填充数据...

    AmazeUI 按钮

    5. **图标集成**:AmazeUI 支持内联图标,可以与文本结合使用,增加按钮的视觉提示和可识别性。 6. **按钮组**:可以将多个按钮组织成一个按钮组,这样在有限的空间内可以展示更多的操作选项。 7. **浮动按钮**:...

    AmazeUI 图标的示例代码

    AmazeUI 的图标系统是其组件之一,提供了丰富的图标集,并且支持多种样式和交互。 在 AmazeUI 中,图标通常通过 CSS 类来应用,这些类可以附加到 `&lt;span&gt;` 或其他元素上,以显示相应的图标。以下是一些 AmazeUI ...

    Amaze UI仿电脑版微信聊天界面HTML代码.zip

    Amaze UI 是一款基于Bootstrap框架并为中国开发者定制的开源前端框架,它提供了丰富的组件和样式,使得构建响应式、移动优先的网页变得更加便捷。在这个"Amaze UI仿电脑版微信聊天界面HTML代码.zip"压缩包中,我们...

    基于amazeui商城销售管理后台模板html源码

    AmazeUI是一款流行的开源前端框架,专为移动优先设计,同时也适用于桌面端。这款商城销售管理后台模板基于AmazeUI构建,旨在提供一个高效、易用且美观的界面,帮助管理员进行商品销售、订单处理、库存管理和数据分析...

    简单AmazeUI框架DEMO

    AmazeUI是一个轻量级、跨屏、模块化的前端框架,专为移动优先设计而打造。这个"简单AmazeUI框架DEMO"很可能是为了演示如何在实际项目中快速搭建响应式网页,以便在不同设备上提供一致的用户体验。下面我们将深入探讨...

    AmazeUI 模态窗口

    AmazeUI 模态窗口是基于前端框架AmazeUI的一个重要组件,用于在网页中创建弹出式的对话框。模态窗口通常用于显示警告、确认信息或者需要用户输入数据的场景,它会在用户与主页面交互时突然出现,并且阻止用户对背景...

    Amaze UI仿电脑版微信聊天界面代码

    7. **图标和字体图标**:Amaze UI 提供了一套图标库,项目中可能使用了这些图标来表示表情、功能按钮等。字体图标是一种将图标存储为字体文件的方式,可以方便地改变颜色、大小,且加载速度快。 8. **交互设计**:...

    我用AmazeUI开发了2个demo,一个pc站,一个app站,欢迎学习.zip

    这个压缩包包含两个使用AmazeUI开发的示例项目:一个针对PC端的网站(pc站版)和一个适用于移动设备的应用版本(app版),以及AmazeUI的触摸优化版源码(amazeui-touch-master.zip)和框架的官方链接(Amaze UI - ...

    AmazeUI 警告框

    警告框在AmazeUI中通常有多种样式,包括成功、警告、错误和信息等,每种样式都有其特定的颜色和图标,以便用户快速识别信息的类型。例如,成功的警告框可能显示为绿色并包含一个勾号图标,而错误警告框则可能是红色...

    AmazeUI后台管理框架

    AmazeUI的核心组件包括布局、表单、按钮、图标、下拉菜单、弹出层、滚动条等,这些都经过精心设计和优化,确保在各种设备上都能提供一致的体验。框架提供的CSS和JS经过gzip压缩后,大小控制在100kB左右,大大减少了...

    AmazeUI 下拉组件

    AmazeUI是一款基于移动优先的前端开发框架,它旨在提供一套高效、易用、跨屏的解决方案,帮助开发者快速构建响应式和高性能的Web应用。在这个主题中,我们将深入探讨AmazeUI中的下拉组件,这是一个常见的交互元素,...

    Amaze UI的模板2套html文件(手机网站)

    此外,Amaze UI 还有丰富的图标库,包括字体图标和SVG图标,便于设计师和开发者选择合适的视觉元素。 2. **响应式设计(Responsive Design)**:Amaze UI 基于移动优先的理念,确保页面在不同分辨率和屏幕尺寸的设备...

    响应式的AmazeUI后台模板,html页面

    AmazeUI的特色在于其丰富的组件库,包括导航、表单、按钮、图标等,这些组件都经过精心设计,以确保在响应式布局下仍能保持功能完整性和视觉一致性。在HTML页面中,这些组件可以通过简单的HTML标记和CSS类来实现,...

    Amaze UI 前台模板

    "Amaze UI 前台模板"提供了精美的Web界面设计,包括但不限于布局、导航、表单、按钮、图标、通知等多种元素,让开发者在创建网站时可以轻松实现专业且吸引人的用户界面。 模板中的"部分图形界面的插件"可能包括各种...

    Amaze UI 手机wap登录页html模板

    此外,Amaze UI的图标集更注重中文语境,图标设计更加贴近国内用户的使用场景。 5. **表单验证**:在登录页模板中,Amaze UI可能包含了表单验证功能,例如检查用户名和密码是否为空,或者密码是否符合复杂度要求等...

    AmazeUI-2.7.2.zip

    4. **图标库**:AmazeUI通常会包含一套SVG或PNG格式的图标资源,用于美化界面和提供可识别的图形元素。这些图标在各种UI元素中都很常见,如按钮、导航栏等。 5. **示例页面**:描述中提到的“示例页面代码”意味着...

    AmazeUI手机模板

    这个"AmazeUI手机模板"是基于AmazeUI框架创建的,适用于快速构建响应式且具有良好交互性的移动Web应用或网站。 在"描述"中提到的“AmazeUI手机模板,你值得拥有,非常不错!一定要下载看看”,这表明该模板被高度...

Global site tag (gtag.js) - Google Analytics