amazeUI的icon图标库

    xiaoxiao2021-04-16  33

    <button id="doc-single-toggle" type="submit" class="am-btn am-btn-primary"><span class="am-icon-floppy-o"></span>保存</button>

    红框中的图片,就是amazeUI图标库中的图标。

    Amaze UI Icon 组件目前使用了 Font Awesome(Amaze UI 2.2.0 中升级至 4.3.0)。

    amazeUI是怎么引入 Font Awesome图片库的,为什么从工程中找不到对应的gif、.icon、png等图片。答案是:

    因为这些图标不是普通图片,而是字符图片,引入字符图片(即矢量图片)的方式,如下:

    http://blog.csdn.net/ke1025178479/article/details/50588965

    http://jingyan.baidu.com/article/fec4bce27ac818f2608d8b4b.html

    那么为什么使用字符图片(即矢量图片)呢?因为

    一些小点的图标,使用图片收缩性,以及美观上并不是很理想,即点击放大之后,变得很模糊,使用字符图片(即矢量图片)就不会。因为矢量图片就等于word中的一个“字体”font(即字体,如宋体、方正小标宋简体等),无论怎么放无限大,word中的文字都是清晰如初的,不会模糊

    实现上是怎么样的呢?

    还是一开始的例子。

    <button id="doc-single-toggle" type="submit" class="am-btn am-btn-primary"><span class="am-icon-floppy-o"></span>保存</button>

    ctrl+h工程中的css文件,找到如下:

    \f0c7就是图标在引入的Font Awesome字库的编号。

    css中这段代码什么意思?

    .am-icon-floppy-o:before {   content: "\f0c7"; } 这是css的功能,即在class=am-icon-floppy-o的前面,加入如下内容"\f0c7" 用法例子:

    转载请注明原文地址: https://ju.6miu.com/read-673153.html

    最新回复(0)