[Learn AF3]第六章 App Framework 3.0中的内置矢量图标-优快云博客

本文详细介绍了如何在AF3中使用内置矢量图标，包括引入必要的样式表、使用图标类名显示图标以及图标的不同尺寸展示方式。此外，文章还提供了一张AF3图标索引图片供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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系列]

转载于:https://www.cnblogs.com/dajianshi/p/4324933.html