[Learn AF3]第六章 App Framework 3.0中的内置矢量图标

时间:2022-09-17 13:22:35

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中图标的索引图片。

[Learn AF3]第六章 App Framework 3.0中的内置矢量图标


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

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

  1. &lbrack;Learn AF3&rsqb;第七章 App framework组件之Popup

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

  2. &lbrack;Learn AF3&rsqb;第五章 App Framework 3组件之Drawer——Side Menu

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

  3. &lbrack;Learn AF3&rsqb;第三章 App Framework 3组件之Panel:afui的核心

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

  4. &lbrack;Learn AF3&rsqb;第四章 App framework组件之Button

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

  5. &lbrack;Learn AF3&rsqb;第二章 App Framework 3&period;0的组件View——AF3的驱动引擎

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

  6. &lbrack;译&rsqb;Intel App Framework 3&period;0的变化

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

  7. &lbrack;Learn AF3&rsqb;第一章 如何使用App Framework 3&period;0 构造应用程序

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

  8. 在Entity Framework 4&period;0中使用 Repository 和 Unit of Work 模式

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

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

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

随机推荐

  1. 关于ES3、ES5、ES6以及ES7所有数组的方法&lpar;api&rpar;的总结

    起因:工作用经常用到操作数组的方法,这里进行一下总结,我尽量以简洁的语言概括每个方法(api)的作用.如果您想快速定位,可以Control+F 然后搜相应的方法即可定位 :) ES3的数组方法 joi ...

  2. pentaho cde数据联动,下拉框,文本框,图形

    先看一下效果: 开源bi工具pentaho数据联动,和传统意义上的更改数据不同,pentaho cde 需要一个监听来动态传值. 说一下需要注意的几个地方吧 1.参数是不能在两个图表中直接传递的,必须 ...

  3. ORA-00054

    系统版本: [root@yoon ~]# more /etc/oracle-releaseOracle Linux Server release 5.7 数据库版本: Oracle Database ...

  4. C&num;对象XML序列化

    1.Xml序列化操作类 .Net Framework提供了对应的System.Xml.Seriazliation.XmlSerializer负责把对象序列化到XML,和从XML中反序列化为对象. 以下 ...

  5. 检查ftp备份数据完整性及短信告警的shell脚本

    发布:thebaby   来源:net     [大 中 小] 检查ftp备份数据完整性及短信告警的shell,有需要的朋友可以参考下. 该脚本实现如下的功能: 对远程备份到ftp服务器的数据完整性及 ...

  6. PHP 之 Laravel 框架安装及相关开源软件

    Laravel 被称为简洁.优雅的PHP开发框架,但第一次接触此框架的人有不少都卡在了安装上,其实在 Linux 下只需要很简单的几步就可以搞定,这里我们以 CentOS 下 PHP + Nginx ...

  7. Android 学习手札(一) 应用程序架构

    1.资源列表 Android支持的资源列表 目   录 资源类型 描述 res/anim  XML  该目录用于存放帧(frame).动画或补间(tweened)动画文件 res/drawable   ...

  8. R与数据分析旧笔记(十七) 主成分分析

    主成分分析 主成分分析 Pearson于1901年提出的,再由Hotelling(1933)加以发展的一种多变量统计方法 通过析取主成分显出最大的个别差异,也用来削减回归分析和聚类分析中变量的数目 可 ...

  9. 转:Selenium借助AutoIt识别上传(下载)详解

    AutoIt目前最新是v3版本,这是一个使用类似BASIC脚本语言的免费软件,它设计用于Windows GUI(图形用户界面)中进行自动化操作.它利用模拟键盘按键,鼠标移动和窗口/控件的组合来实现自动 ...

  10. batch 常用命令

    1 echo 和 @ 回显命令 @ # 关闭单行回显 echo off # 从下一行开始关闭回显 @echo off # 从本行开始关闭回显,一般批处理第一行都是这个 echo on # 从下一行开始 ...