AF3的内置矢量图标


介绍:要使用af3中的图标,必须首先引入icon.css,由于文件中已经内置了字体文件数据,因此不需要引入字体文件支持。

<link rel="stylesheet" type="text/css" href="js/af3.0/icons.min.css" />

使用:引入icon.css文件之后,我们就可以通过给需要显示图标的元素添加css类名来显示图标(实际上就是一个矢量字符),注意需要同时添加icon 和图标的具体类名。af3的矢量图标同时支持三种规格,正常大小、小号图标、大号图标,具体请看下面代码:

<!-- 显示正常大小的home图标 -->
<div class='icon home'>Home</div> <!-- 显示小号的home图标 -->
<div class='icon home mini'>Home</div> <!-- 显示大号的home图标 -->
<div class='icon home big'>Home</div>

AF3图标索引:由于官网没有图标的索引,特此制作了af中图标的索引图片。


第五章 App Framework 3组件之Drawer——Side Menu  [Learn AF3系列]

[Learn AF3]第六章 App Framework 3.0中的内置矢量图标的更多相关文章

  1. [Learn AF3]第七章 App framework组件之Popup

    AF3的弹出对话框Popup 组件名称:Popup 是否js控件:是,$.afui.popup     说明:af3中的popup和af2中相比变化不大,依然是通过插件popup来实现的     方法 ...

  2. [Learn AF3]第五章 App Framework 3组件之Drawer——Side Menu

    Drawer——Side menu 组件名称:Drawer     说明:af3中的side menu和af2中有很大变化,af3中的side menu实际上是通过插件$.afui.drawer来实现 ...

  3. [Learn AF3]第三章 App Framework 3组件之Panel:afui的核心

    Panel,afui的核心组件 组件名称:Panel     使用说明:按照官方的说法,panel组件是af3的“核心(heart of the ui)”,panel用于构造应用中独立的内容展示区域, ...

  4. [Learn AF3]第四章 App framework组件之Button

    Button    组件名称:Button     是否js控件:否     使用说明:如果说panel组件是af3的“核心(heart of the ui)”,那么Button就是af中的五虎上将之 ...

  5. [Learn AF3]第二章 App Framework 3.0的组件View——AF3的驱动引擎

    View:af3中的驱动引擎   组件名称:View     使用说明:按照官方的说法,view组件是af3的“驱动引擎(driving force)”,view是af3应用的基础,一个app中可以包 ...

  6. [译]Intel App Framework 3.0的变化

    App Framework 3.0 原文 IAN M. (Intel) 发布于 2015-02-11  05:24 我们高兴地宣布App Framework 的新版本3.0发布了.你可以获得最新的代码 ...

  7. [Learn AF3]第一章 如何使用App Framework 3.0 构造应用程序

    af3的变化非常大.参见[译]Intel App Framework 3.0的变化 一.应用需要引用的js脚本: af3中不在自己实现dom选择器,而是选择基于jquey或兼容jquery的库如zep ...

  8. 在Entity Framework 4.0中使用 Repository 和 Unit of Work 模式

    [原文地址]Using Repository and Unit of Work patterns with Entity Framework 4.0 [原文发表日期] 16 June 09 04:08 ...

  9. 简学Python第三章__函数式编程、递归、内置函数

    #cnblogs_post_body h2 { background: linear-gradient(to bottom, #18c0ff 0%,#0c7eff 100%); color: #fff ...

随机推荐

  1. BaseRecyclerViewAdapterHelper使用

    Reference: https://www.jianshu.com/p/1e20f301272e 一.框架引入 先在项目的 build.gradle(Project:XXXX) 的 reposito ...

  2. C#学习笔记(14)——C# 使用IComparer自定义List类的排序方案

    说明(2017-7-17 21:34:59): 原文:https://my.oschina.net/Tsybius2014/blog/298702?p=1 另一篇比较好的:https://wenku. ...

  3. phalcon无限重定向

    问题 换了个新电脑,后来重新配置phalcon环境.由于用得是windows,而且还用得是2.0.5得版本,官网已经没提供这个版本下载了.而旧电脑已经被格式化了,

  4. 迭代器模式和组合模式(head first设计模式——8)

    把迭代器模式和组合模式放在同一篇的原因是其联系比较紧密. 一.迭代器模式 1.1迭代器模式定义 迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素,而不是暴露其内部的表示. 这个模式提供了一种方法 ...

  5. RabbitMQ安装 ubuntu12.04LTS

    RabbitMQ安装需要安装较多的依赖包,之前如果安装过RabbitMQ-server必须要先彻底删除. 重装的ubuntu系统(ubuntu server)的开发环境几乎是裸的,再重新编译安装erl ...

  6. 【WPF】拖拽ListBox中的Item

    整理了两个关于WPF拖拽ListBox中的Item的功能.项目地址 https://github.com/Guxin233/WPF-DragItemInListBox 需求一: 两个ListBox,拖 ...

  7. OpenWRT中的按键和灯的GPIO控制实现_转

    本文转自:OpenWRT中的按键和灯的GPIO控制实现 基于BarrierBreaker版本,基于AR9331 AP121 Demo单板 来进行描述 1.灯 A.在mach-ap121.c中,定义了灯 ...

  8. Mask R-CNN详解和安装

    Detectron是Facebook的物体检测平台,今天宣布开源,它基于Caffe2,用Python写成,这次开放的代码中就包含了Mask R-CNN的实现. 除此之外,Detectron还包含了IC ...

  9. SpringMVC登录拦截器

    springmvc拦截器的配置.使用:1.自定义拦截器,实现HandlerInterceptor接口. package com.bybo.aca.web.interceptor; import jav ...

  10. Linux之查看CPU

    # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo| ...