amazeUI的icon图标库

红框中的图片，就是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中的文字都是清晰如初的，不会模糊。

实现上是怎么样的呢？

还是一开始的例子。

ctrl+h工程中的css文件，找到如下：

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

css中这段代码什么意思？

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

用法例子：

amazeUI的icon图标库相关推荐

微信小程序开发-引入阿里巴巴矢量icon图标库
微信小程序开发-引入阿里巴巴矢量icon图标库 https://blog.csdn.net/tang1392/article/details/78927107
如何使用Element Plus 提供的Icon图标库
文章目录前言一.安装二.使用 1.引入需要的图标 2.页面效果 3.还有一个奇怪的问题总结前言用vue3开发的时候,使用element-plus UI组件库的时候,发现不能像之前vue2时 ...
扩充antd的Icon图标库
一.功能介绍项目中有个菜单图标支持配置的功能,如下二.遇到的问题上面的图标都是antdIcon组件自带的,只需要给Icon传不同的type就可以显示出来不同的图标,但是我现在需要将自己的图标也放 ...
Font Awesome、ionic icon图标库的超详细使用方法
Hello,这里是大魔王
Naive 组件库动态渲染icon图标
使用Naive组件库默认你已经安装了对应的icon图标库没有安装的参考链接安装点击传送 Naive组件动态渲染Icon图标主要是使用 component Vue内置组件来渲染对应的icon组件, ...
前端知识：如何创建自己的Iconfont图标库
在日常的开发过程中,前端页面经常会引用一些图标,iconfont图标库是前端开发者非常友好的在线字体图标库.大家可以根据平常所涉及的项目,收藏自己需要的图标库,方便在后续的项目中使用,今天小编给大家介 ...
【vue项目实战】如何使用icon图标
一.通过ai将图片生成svg,条件允许最好找ui设计师参考 https://www.jianshu.com/p/d30bc9e83e00 二.如何将svg转换为icon图标 1.进入阿里巴巴图标矢量 ...
浏览器全屏功能 icon图标设置
如图,通过点击全屏图标实现页面全屏/取消全屏功能,类似浏览器f11. 一.icon图标选择: 这里偷懒使用的阿里巴巴矢量图标库,当然也可以自己找ui设计一个,地址:icon图标库,icon相关代码如下 ...
微信小程序项目中使用icon图标
效果: 步骤: 1.先让ui负责人把你的账号加入到项目中,加入到项目中后就可以在icon图标库中看到该项目 2.在小程序中使用新建一个view,在上面加一个class,复制icon名字上去即可,注意 ...
Vue 组件库 HeyUI@1.19.0 发布，新增 Icon 图标
开发四年只会写业务代码,分布式高并发都不会还做程序员? Releases Logs 新增新增Search 属性 height width (3e9b0d5) 新增Icon (77aee70) 修 ...

amazeUI的icon图标库

amazeUI的icon图标库相关推荐

最新文章

热门文章