Iconfont 图标
简介
因为图标在任何项目始终都是需要的,而且避免更多的网络请求,故而AXUI的图标库从iconfont.cn平台移除,以base64的形式存在ax.css中,用户不需要再另外引用图标字体。
如果用户需要使用自己的图标字体代替ax-iconfont,那么可以自行在ax.css删除ax-iconfont代码部分(主要是base64文件和字体before伪类)。
使用方法
base64的图标字体有两种用法:
- 1、对标签使用
ax-iconfont ax-icon-*
,比如<span class="ax-iconfont ax-icon-arrow-down-o"></span>。最终结果是: - 2、对标签使用
ax-iconfont
,同时在标签内填写图标名,比如<span class="ax-iconfont">arrow-down-o</span>。最终结果是:
命名规则
图标命名规则是:ax-icon- + 特点 + 形状 + 填充,形状一般是circle和square,简写为o和s;如果是纯色填充则加上f。比如ax-icon-close-o-f表示:带圆圈的关闭图标,同时纯色填充,显示结果为:。
系列图标举例:
- ax-icon-close
- ax-icon-close-o
- ax-icon-close-s
- ax-icon-close-o-f
- ax-icon-close-s-f
其他规则还有:-h表示水平排列;-v表示垂直排列;-t表示纤细;-alt表示另外一种风格
AX图标库
共有图标个。
箭头类个
表单类个
菜单导航类个
社交分享类个
媒体文件类个
页面常用图标个
品牌个