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. 关于正则表达式的“\b”

    今天刚刚开始看正则表达式就遇到一个十分头疼的问题,原文是这样的: “不幸的是,很多单词里包含hi这两个连续的字符,比如him,history,high等等.用hi来查找的话,这里边的hi也会被找出来. ...

  2. mongo源码学习(四)invariant

    前言 在看MongoDB源码的时候,经常会看到这个玩意儿:invariant. invariant的字面意思是:不变式. 在emacs上跳转到函数定义要安装一个插件,ggtags,费了老大劲儿.这都可 ...

  3. Java并发编程:阻塞队列 <转>

    在前面几篇文章中,我们讨论了同步容器(Hashtable.Vector),也讨论了并发容器(ConcurrentHashMap.CopyOnWriteArrayList),这些工具都为我们编写多线程程 ...

  4. Android——Android Studio导入SlidingMenu类库的方法

    Android Studio导入SlidingMenu类库的方法(其他类库应该也适用)   本篇文章主要介绍了"Android Studio导入SlidingMenu类库的方法(其他类库应该 ...

  5. JAVA环境变量配置详解(Windows)

    JAVA环境变量配置详解(Windows)   JAVA环境变量JAVA_HOME.CLASSPATH.PATH设置详解  Windows下JAVA用到的环境变量主要有3个,JAVA_HOME.CLA ...

  6. ELK(Logstash+Elasticsearch+Kibana)的原理和详细搭建

    一. Elastic Stack Elastic Stack是ELK的官方称呼,网址:https://www.elastic.co/cn/products ,其作用是“构建在开源基础之上, Elast ...

  7. C#中二进制和流之间的各种相互转换

    一. 二进制转换成图片间的转换 1 2 3 4 5 MemoryStream ms = new MemoryStream(bytes); ms.Position = 0; Image img = Im ...

  8. FatJar in 创新实训 自然语言交流系统

    Fat Jar Eclipse Plug-In是一个可以将Eclipse JavaProject的所有资源打包进一个可执行jar文件的小工具,可以方便的完成各种打包任务,我们经常会来打jar包,但是e ...

  9. 《FPGA全程进阶---实战演练》第十章 数码管实验

    1基础理论部分 led数码管是由多个发光二极管封装在一起组合的“8”字型的器件,引线内部已经完成,如下图10.1所示,图10.2为实物图. 图10.1 数码管内部结构 那么我们想要控制数码管的亮灭,其 ...

  10. Android 中自定义控件和属性(attr.xml,declare-styleable,TypedArray)的方法和使用

    一. 在res/values 文件下定义一个attrs.xml 文件.代码如下: <?xml version="1.0" encoding="utf-8" ...