UIGG图标是UIGG框架的组件库,但也可以不依赖UIGG独立使用,目前已创意了超过1500个精美图标,后续还会继续增加,可以发现其中包含了很多紧跟时事的图标,比如健康二维码,通信通行二维码,冠状病毒等等。提供免费授权字体和api,通过iconfont、img、unicode、symbol和css可以方便地使用字体。下载开箱即可用于Android、iOS和web。
Unicode 使用方法
图标信息
为HTML页面中的字体添加预加载,以提高字体的加载速度
<link href="https://cdn.jsdelivr.net/npm/uigg/ico/iconfont/ico.woff2" as="font" type="font/woff2" rel="preload" crossorigin="anonymous">
字体
复制项目下生成的@font face(如果需要支持IE,请加载woff格式)
@font-face {
font-family: 'ico';
src: url('https://cdn.jsdelivr.net/npm/uigg/ico/iconfont/ico.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/npm/uigg/ico/iconfont/ico.woff') format('woff');
}
样式
定义使用图标字体的样式
.ico {
font-family: "ico" !important;
font-size: 24px;font-style: normal;font-weight: normal;
text-decoration: none;text-align: center;justify-content: center;margin: auto;vertical-align: middle;
line-height: 1;text-transform: none;display: inline-block;
direction: ltr;letter-spacing: normal;word-wrap: normal;white-space: nowrap;
}
应用
选择相应的图标并获取字体代码,然后将其应用于页面
<i class="ico"></i>
Class 使用方法
图标信息
为HTML页面中的字体添加预加载,以提高字体的加载速度
<link href="https://cdn.jsdelivr.net/npm/uigg/ico/iconfont/ico.woff2" as="font" type="font/woff2" rel="preload" crossorigin="anonymous">
字体
加入项目下生成的字体类代码
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uigg/ico/iconfont/ico.min.css">
应用
选择相应的图标并获取类名,然后将其应用于页面
<i class="ico ico-xxx"></i>
Symbol 使用方法
图标信息
导入项目下生成的符号代码
<script src="https://cdn.jsdelivr.net/npm/uigg/ico/iconfont/ico.min.js"></script>
样式
添加通用CSS代码
.ico {
width: 1em;height: 1em;
vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
应用
选择相应的图标并获取类名,然后将其应用于页面
<svg class="ico" aria-hidden="true">
<use xlink:href="#ico-xxx"></use>
</svg>
授权许可
UIGG 图标库遵循 APACHE LICENSE, VERSION 2.0,可免费个人和商用,建议署名但不是必须。