诏预

基于IconFont的字体图标库

IconFont 图标

font-class引用


font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。

与unicode使用方式相比,具有如下特点:

使用步骤如下:

第一步:引入项目下面生成的fontclass代码:

<link rel="stylesheet" type="text/css" href="https://static.saintic.com/cdn/iconfont/iconfont.css">

第二步:挑选相应图标并获取类名,应用于页面:

<i class="saintic-icon saintic-icon-xxx"></i>

使用示例如下:

比如“关闭”图标:

<i class="saintic-icon saintic-icon-close"></i>

图标尺寸


共支持以下9类尺寸变化:

.saintic-icon-1{font-size: 1em;}

.saintic-icon-1-5{font-size: 1.5em;}

.saintic-icon-2{font-size: 2em;}

.saintic-icon-2-5{font-size: 2.5em;}

.saintic-icon-3{font-size: 3em;}

.saintic-icon-3-5{font-size: 3.5em;}

.saintic-icon-4{font-size: 4em;}

.saintic-icon-4-5{font-size: 4.5em;}

.saintic-icon-5{font-size: 5em;}

使用示例如下:

比如“关闭”图标,使用“saintic-icon-4”扩大4倍: