From 126c065f80ce26bf3e7b7d07852b71cd90010ff7 Mon Sep 17 00:00:00 2001 From: republicline <1464474399@qq.com> Date: Mon, 14 Oct 2024 14:17:57 +0800 Subject: [PATCH] =?UTF-8?q?2024=E5=B9=B410=E6=9C=888=E6=97=A509=E7=82=B953?= =?UTF-8?q?=E5=88=86=20=E6=B7=BB=E5=8A=A0icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- public/favicon.ico | Bin 3282 -> 0 bytes public/icon.ico | Bin 0 -> 4276 bytes src/assets/font/demo_index.html | 2028 ------------------------------- 4 files changed, 1 insertion(+), 2029 deletions(-) delete mode 100644 public/favicon.ico create mode 100644 public/icon.ico delete mode 100644 src/assets/font/demo_index.html diff --git a/index.html b/index.html index 1466f6a..eb0562b 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + 瑞鞍星医疗科技 diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index 1b662fc7f15fc93a685f7152286e3d2953924085..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3282 zcmbu3`8(9>8^=F0jIA6dOU9C8-?NNuMsn=gBiYHmWM4x<#aJ3yW{gZzLW9PTrL2*V zHN?v>o6B05BL#bGGTfFfuUFp94YYXwTZ0Spg6& z4FCopG+_GwCuqSm5IPV&1Hi}xy}-uKEih{HgySNY5Zo%~EDr+#G-tE^b)7xv=po=g zDhcRW>&ylQ(VQ9o00Ps{Lg>ycfB-wapuCW#xeKST$muw6{wxTF(m(+Xpf<3oxqXsX zYM^e}(W`&(1Zqbfz0cy;nOV(1g{+Oc<9XTrAEMJVo8PN5@?EJL?G>V-lVA9ZG-yyvmM2B}Dl(Y3K zs$26yCD0bK7)={z$!Z@95}A|4Q-dXWISkQ$YJY^;{?0 z&Tn8oMQm*!!2CWsY5oe?YwTCYM5Iujf?vt@*_XGkX;EhUce#2+Xq>ytsvI1cW!)Hr zrJ|~dLT-Xq>p>j0h{=pLrHG|Rep~mWns58zQlGsx?rr&$qGVn>>}L@aGE+t^@Ecwu zYWeJsL4&RZ3O{+uXVuO5)8q-GgdoxmA)H{!>rwn}jBT}=xO7N;P`?>6IS_5_jIqZQ zevh)SbIB47Y-sJ2e=YsxqCH0uM9*LBOSZR`o(Jywa1Sevt0$z_*U^Ili_GoJoPTI0 zLWWzz)hzYM=?044i&I41Y#JuDD Wg<6vXy|`<0xd61vinAA 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 - - - - iconfont Demo - - - - - - - - - - - - - -
-

- - -

-
-
    -
  • Unicode
    • -
  • Font class
    • -
  • Symbol
    • -
- - 查看项目 - -
-
-
-
    - -
  • - -
    举报
    -
    &#xe61f;
    -
    • - -
  • - -
    消息-置灰
    -
    &#xe621;
    -
    • - -
  • - -
    喜欢
    -
    &#xe622;
    -
    • - -
  • - -
    更多
    -
    &#xe623;
    -
    • - -
  • - -
    个人中心-置灰
    -
    &#xe625;
    -
    • - -
  • - -
    看点-置灰
    -
    &#xe626;
    -
    • - -
  • - -
    返回
    -
    &#xe627;
    -
    • - -
  • - -
    快捷支付
    -
    &#xe628;
    -
    • - -
  • - -
    支付订金
    -
    &#xe629;
    -
    • - -
  • - -
    开通服务
    -
    &#xe62a;
    -
    • - -
  • - -
    签署协议
    -
    &#xe62b;
    -
    • - -
  • - -
    店铺
    -
    &#xe62c;
    -
    • - -
  • - -
    关注-置灰
    -
    &#xe62e;
    -
    • - -
  • - -
    提交验资
    -
    &#xe62f;
    -
    • - -
  • - -
    定位 2
    -
    &#xe630;
    -
    • - -
  • - -
    转入资金
    -
    &#xe631;
    -
    • - -
  • - -
    验资完成
    -
    &#xe632;
    -
    • - -
  • - -
    关闭
    -
    &#xe633;
    -
    • - -
  • - -
    分享
    -
    &#xe634;
    -
    • - -
  • - -
    在线验资
    -
    &#xe635;
    -
    • - -
  • - -
    上传图片
    -
    &#xe636;
    -
    • - -
  • - -
    定位
    -
    &#xe637;
    -
    • - -
  • - -
    在线选房
    -
    &#xe638;
    -
    • - -
  • - -
    填选购人
    -
    &#xe639;
    -
    • - -
  • - -
    分享 2
    -
    &#xe63a;
    -
    • - -
  • - -
    保护号码
    -
    &#xe63b;
    -
    • - -
  • - -
    下拉
    -
    &#xe63c;
    -
    • - -
  • - -
    专属顾问
    -
    &#xe63d;
    -
    • - -
  • - -
    编辑
    -
    &#xe63e;
    -
    • - -
  • - -
    进入
    -
    &#xe63f;
    -
    • - -
  • - -
    下拉
    -
    &#xe640;
    -
    • - -
  • - -
    提示
    -
    &#xe641;
    -
    • - -
  • - -
    床
    -
    &#xe642;
    -
    • - -
  • - -
    停车场
    -
    &#xe643;
    -
    • - -
  • - -
    休息室
    -
    &#xe644;
    -
    • - -
  • - -
    衣柜
    -
    &#xe645;
    -
    • - -
  • - -
    休闲区
    -
    &#xe646;
    -
    • - -
  • - -
    书桌
    -
    &#xe647;
    -
    • - -
  • - -
    智能门锁
    -
    &#xe648;
    -
    • - -
  • - -
    宽带
    -
    &#xe649;
    -
    • - -
  • - -
    前台
    -
    &#xe64a;
    -
    • - -
  • - -
    书吧
    -
    &#xe64b;
    -
    • - -
  • - -
    洗衣房
    -
    &#xe64c;
    -
    • - -
  • - -
    空中花园
    -
    &#xe64d;
    -
    • - -
  • - -
    电视机
    -
    &#xe64e;
    -
    • - -
  • - -
    微波炉
    -
    &#xe64f;
    -
    • - -
  • - -
    电梯
    -
    &#xe650;
    -
    • - -
  • - -
    天然气
    -
    &#xe651;
    -
    • - -
  • - -
    电磁炉
    -
    &#xe652;
    -
    • - -
  • - -
    热水器
    -
    &#xe654;
    -
    • - -
  • - -
    安全监控
    -
    &#xe655;
    -
    • - -
  • - -
    DIY餐吧
    -
    &#xe656;
    -
    • - -
  • - -
    橱柜
    -
    &#xe657;
    -
    • - -
  • - -
    地铁
    -
    &#xe658;
    -
    • - -
  • - -
    影音区
    -
    &#xe659;
    -
    • - -
  • - -
    餐桌
    -
    &#xe65a;
    -
    • - -
  • - -
    抽油烟机
    -
    &#xe65b;
    -
    • - -
  • - -
    空调
    -
    &#xe65c;
    -
    • - -
  • - -
    桌球区
    -
    &#xe65d;
    -
    • - -
  • - -
    暖气
    -
    &#xe65e;
    -
    • - -
  • - -
    沙发
    -
    &#xe65f;
    -
    • - -
  • - -
    健身房
    -
    &#xe660;
    -
    • - -
  • - -
    便利店
    -
    &#xe661;
    -
    • - -
  • - -
    会客区
    -
    &#xe662;
    -
    • - -
  • - -
    24H安保
    -
    &#xe663;
    -
    • - -
  • - -
    社区活动
    -
    &#xe664;
    -
    • - -
  • - -
    冰箱
    -
    &#xe665;
    -
    • - -
  • - -
    洗衣机
    -
    &#xe666;
    -
    • - -
  • - -
    setting
    -
    &#xe799;
    -
    • - -
  • - -
    首页
    -
    &#xe751;
    -
    • - -
  • - -
    安全保障
    -
    &#xe61e;
    -
    • - -
  • - -
    预约
    -
    &#xe6eb;
    -
    • - -
  • - -
    users 用户组
    -
    &#xe6e3;
    -
    • - -
  • - -
    3.1 设置
    -
    &#xe600;
    -
    • - -
  • - -
    远程费
    -
    &#xe669;
    -
    • - -
  • - -
    24gl-userGroup
    -
    &#xeb25;
    -
    • - -
  • - -
    后台管理
    -
    &#xe653;
    -
    • - -
  • - -
    人员管理
    -
    &#xe62d;
    -
    • - -
  • - -
    首页-置灰
    -
    &#xe61d;
    -
    • - -
  • - -
    down-circle
    -
    &#xe77f;
    -
    • - -
-
-

Unicode 引用

-
- -

Unicode 是字体在网页端最原始的应用方式，特点是：

-
    -
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • -
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • -
-
-

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

-
-

Unicode 使用步骤如下：

-

第一步：拷贝项目下面生成的 @font-face

-
@font-face {
-  font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1703667125178') format('woff2'),
-       url('iconfont.woff?t=1703667125178') format('woff'),
-       url('iconfont.ttf?t=1703667125178') format('truetype');
-}
-
-

第二步：定义使用 iconfont 的样式

-
.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-

第三步：挑选相应图标并获取字体编码，应用于页面

-
-<span class="iconfont">&#x33;</span>
-
-
-

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

-
-
-
-
-
    - -
  • - -
    - 举报 -
    -
    .icon-jubao -
    -
    • - -
  • - -
    - 消息-置灰 -
    -
    .icon-xiaoxi-zhihui -
    -
    • - -
  • - -
    - 喜欢 -
    -
    .icon-xihuan -
    -
    • - -
  • - -
    - 更多 -
    -
    .icon-gengduo -
    -
    • - -
  • - -
    - 个人中心-置灰 -
    -
    .icon-gerenzhongxin-zhihui -
    -
    • - -
  • - -
    - 看点-置灰 -
    -
    .icon-kandian-zhihui -
    -
    • - -
  • - -
    - 返回 -
    -
    .icon-fanhui -
    -
    • - -
  • - -
    - 快捷支付 -
    -
    .icon-kuaijiezhifu -
    -
    • - -
  • - -
    - 支付订金 -
    -
    .icon-zhifudingjin -
    -
    • - -
  • - -
    - 开通服务 -
    -
    .icon-kaitongfuwu -
    -
    • - -
  • - -
    - 签署协议 -
    -
    .icon-qianshuxieyi -
    -
    • - -
  • - -
    - 店铺 -
    -
    .icon-dianpu -
    -
    • - -
  • - -
    - 关注-置灰 -
    -
    .icon-guanzhu-zhihui -
    -
    • - -
  • - -
    - 提交验资 -
    -
    .icon-tijiaoyanzi -
    -
    • - -
  • - -
    - 定位 2 -
    -
    .icon-a-dingwei2 -
    -
    • - -
  • - -
    - 转入资金 -
    -
    .icon-zhuanruzijin -
    -
    • - -
  • - -
    - 验资完成 -
    -
    .icon-yanziwancheng -
    -
    • - -
  • - -
    - 关闭 -
    -
    .icon-guanbi -
    -
    • - -
  • - -
    - 分享 -
    -
    .icon-fenxiang -
    -
    • - -
  • - -
    - 在线验资 -
    -
    .icon-zaixianyanzi -
    -
    • - -
  • - -
    - 上传图片 -
    -
    .icon-shangchuantupian -
    -
    • - -
  • - -
    - 定位 -
    -
    .icon-dingwei -
    -
    • - -
  • - -
    - 在线选房 -
    -
    .icon-zaixianxuanfang -
    -
    • - -
  • - -
    - 填选购人 -
    -
    .icon-tianxuangouren -
    -
    • - -
  • - -
    - 分享 2 -
    -
    .icon-a-fenxiang2 -
    -
    • - -
  • - -
    - 保护号码 -
    -
    .icon-baohuhaoma -
    -
    • - -
  • - -
    - 下拉 -
    -
    .icon-a-xiala2 -
    -
    • - -
  • - -
    - 专属顾问 -
    -
    .icon-zhuanshuguwen -
    -
    • - -
  • - -
    - 编辑 -
    -
    .icon-bianji -
    -
    • - -
  • - -
    - 进入 -
    -
    .icon-jinru -
    -
    • - -
  • - -
    - 下拉 -
    -
    .icon-xiala -
    -
    • - -
  • - -
    - 提示 -
    -
    .icon-tishi -
    -
    • - -
  • - -
    - 床 -
    -
    .icon-chuang -
    -
    • - -
  • - -
    - 停车场 -
    -
    .icon-tingchechang -
    -
    • - -
  • - -
    - 休息室 -
    -
    .icon-xiuxishi -
    -
    • - -
  • - -
    - 衣柜 -
    -
    .icon-yigui -
    -
    • - -
  • - -
    - 休闲区 -
    -
    .icon-xiuxianqu -
    -
    • - -
  • - -
    - 书桌 -
    -
    .icon-shuzhuo -
    -
    • - -
  • - -
    - 智能门锁 -
    -
    .icon-zhinengmensuo -
    -
    • - -
  • - -
    - 宽带 -
    -
    .icon-kuandai -
    -
    • - -
  • - -
    - 前台 -
    -
    .icon-qiantai -
    -
    • - -
  • - -
    - 书吧 -
    -
    .icon-shuba -
    -
    • - -
  • - -
    - 洗衣房 -
    -
    .icon-xiyifang -
    -
    • - -
  • - -
    - 空中花园 -
    -
    .icon-kongzhonghuayuan -
    -
    • - -
  • - -
    - 电视机 -
    -
    .icon-dianshiji -
    -
    • - -
  • - -
    - 微波炉 -
    -
    .icon-weibolu -
    -
    • - -
  • - -
    - 电梯 -
    -
    .icon-dianti -
    -
    • - -
  • - -
    - 天然气 -
    -
    .icon-tianranqi -
    -
    • - -
  • - -
    - 电磁炉 -
    -
    .icon-diancilu -
    -
    • - -
  • - -
    - 热水器 -
    -
    .icon-reshuiqi -
    -
    • - -
  • - -
    - 安全监控 -
    -
    .icon-anquanjiankong -
    -
    • - -
  • - -
    - DIY餐吧 -
    -
    .icon-DIYcanba -
    -
    • - -
  • - -
    - 橱柜 -
    -
    .icon-chugui -
    -
    • - -
  • - -
    - 地铁 -
    -
    .icon-ditie -
    -
    • - -
  • - -
    - 影音区 -
    -
    .icon-yingyinqu -
    -
    • - -
  • - -
    - 餐桌 -
    -
    .icon-canzhuo -
    -
    • - -
  • - -
    - 抽油烟机 -
    -
    .icon-chouyouyanji -
    -
    • - -
  • - -
    - 空调 -
    -
    .icon-kongtiao -
    -
    • - -
  • - -
    - 桌球区 -
    -
    .icon-zhuoqiuqu -
    -
    • - -
  • - -
    - 暖气 -
    -
    .icon-nuanqi -
    -
    • - -
  • - -
    - 沙发 -
    -
    .icon-shafa -
    -
    • - -
  • - -
    - 健身房 -
    -
    .icon-jianshenfang -
    -
    • - -
  • - -
    - 便利店 -
    -
    .icon-bianlidian -
    -
    • - -
  • - -
    - 会客区 -
    -
    .icon-huikequ -
    -
    • - -
  • - -
    - 24H安保 -
    -
    .icon-a-24Hanbao -
    -
    • - -
  • - -
    - 社区活动 -
    -
    .icon-shequhuodong -
    -
    • - -
  • - -
    - 冰箱 -
    -
    .icon-bingxiang -
    -
    • - -
  • - -
    - 洗衣机 -
    -
    .icon-xiyiji -
    -
    • - -
  • - -
    - setting -
    -
    .icon-setting -
    -
    • - -
  • - -
    - 首页 -
    -
    .icon-shouye -
    -
    • - -
  • - -
    - 安全保障 -
    -
    .icon-anquanbaozhang -
    -
    • - -
  • - -
    - 预约 -
    -
    .icon-RectangleCopy -
    -
    • - -
  • - -
    - users 用户组 -
    -
    .icon-users -
    -
    • - -
  • - -
    - 3.1 设置 -
    -
    .icon-31shezhi -
    -
    • - -
  • - -
    - 远程费 -
    -
    .icon-yuanchengfei -
    -
    • - -
  • - -
    - 24gl-userGroup -
    -
    .icon-24gl-userGroup -
    -
    • - -
  • - -
    - 后台管理 -
    -
    .icon-houtaiguanli -
    -
    • - -
  • - -
    - 人员管理 -
    -
    .icon-renyuanguanli -
    -
    • - -
  • - -
    - 首页-置灰 -
    -
    .icon-shouye-zhihui -
    -
    • - -
  • - -
    - down-circle -
    -
    .icon-down-circle -
    -
    • - -
-
-

font-class 引用

-
- -

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

-

与 Unicode 使用方式相比，具有如下特点：

-
    -
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • -
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • -
-

使用步骤如下：

-

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

-
<link rel="stylesheet" href="./iconfont.css">
-
-

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

-
<span class="iconfont icon-xxx"></span>
-
-
-

" - iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

-
-
-
-
-
    - -
  • - -
    举报
    -
    #icon-jubao
    -
    • - -
  • - -
    消息-置灰
    -
    #icon-xiaoxi-zhihui
    -
    • - -
  • - -
    喜欢
    -
    #icon-xihuan
    -
    • - -
  • - -
    更多
    -
    #icon-gengduo
    -
    • - -
  • - -
    个人中心-置灰
    -
    #icon-gerenzhongxin-zhihui
    -
    • - -
  • - -
    看点-置灰
    -
    #icon-kandian-zhihui
    -
    • - -
  • - -
    返回
    -
    #icon-fanhui
    -
    • - -
  • - -
    快捷支付
    -
    #icon-kuaijiezhifu
    -
    • - -
  • - -
    支付订金
    -
    #icon-zhifudingjin
    -
    • - -
  • - -
    开通服务
    -
    #icon-kaitongfuwu
    -
    • - -
  • - -
    签署协议
    -
    #icon-qianshuxieyi
    -
    • - -
  • - -
    店铺
    -
    #icon-dianpu
    -
    • - -
  • - -
    关注-置灰
    -
    #icon-guanzhu-zhihui
    -
    • - -
  • - -
    提交验资
    -
    #icon-tijiaoyanzi
    -
    • - -
  • - -
    定位 2
    -
    #icon-a-dingwei2
    -
    • - -
  • - -
    转入资金
    -
    #icon-zhuanruzijin
    -
    • - -
  • - -
    验资完成
    -
    #icon-yanziwancheng
    -
    • - -
  • - -
    关闭
    -
    #icon-guanbi
    -
    • - -
  • - -
    分享
    -
    #icon-fenxiang
    -
    • - -
  • - -
    在线验资
    -
    #icon-zaixianyanzi
    -
    • - -
  • - -
    上传图片
    -
    #icon-shangchuantupian
    -
    • - -
  • - -
    定位
    -
    #icon-dingwei
    -
    • - -
  • - -
    在线选房
    -
    #icon-zaixianxuanfang
    -
    • - -
  • - -
    填选购人
    -
    #icon-tianxuangouren
    -
    • - -
  • - -
    分享 2
    -
    #icon-a-fenxiang2
    -
    • - -
  • - -
    保护号码
    -
    #icon-baohuhaoma
    -
    • - -
  • - -
    下拉
    -
    #icon-a-xiala2
    -
    • - -
  • - -
    专属顾问
    -
    #icon-zhuanshuguwen
    -
    • - -
  • - -
    编辑
    -
    #icon-bianji
    -
    • - -
  • - -
    进入
    -
    #icon-jinru
    -
    • - -
  • - -
    下拉
    -
    #icon-xiala
    -
    • - -
  • - -
    提示
    -
    #icon-tishi
    -
    • - -
  • - -
    床
    -
    #icon-chuang
    -
    • - -
  • - -
    停车场
    -
    #icon-tingchechang
    -
    • - -
  • - -
    休息室
    -
    #icon-xiuxishi
    -
    • - -
  • - -
    衣柜
    -
    #icon-yigui
    -
    • - -
  • - -
    休闲区
    -
    #icon-xiuxianqu
    -
    • - -
  • - -
    书桌
    -
    #icon-shuzhuo
    -
    • - -
  • - -
    智能门锁
    -
    #icon-zhinengmensuo
    -
    • - -
  • - -
    宽带
    -
    #icon-kuandai
    -
    • - -
  • - -
    前台
    -
    #icon-qiantai
    -
    • - -
  • - -
    书吧
    -
    #icon-shuba
    -
    • - -
  • - -
    洗衣房
    -
    #icon-xiyifang
    -
    • - -
  • - -
    空中花园
    -
    #icon-kongzhonghuayuan
    -
    • - -
  • - -
    电视机
    -
    #icon-dianshiji
    -
    • - -
  • - -
    微波炉
    -
    #icon-weibolu
    -
    • - -
  • - -
    电梯
    -
    #icon-dianti
    -
    • - -
  • - -
    天然气
    -
    #icon-tianranqi
    -
    • - -
  • - -
    电磁炉
    -
    #icon-diancilu
    -
    • - -
  • - -
    热水器
    -
    #icon-reshuiqi
    -
    • - -
  • - -
    安全监控
    -
    #icon-anquanjiankong
    -
    • - -
  • - -
    DIY餐吧
    -
    #icon-DIYcanba
    -
    • - -
  • - -
    橱柜
    -
    #icon-chugui
    -
    • - -
  • - -
    地铁
    -
    #icon-ditie
    -
    • - -
  • - -
    影音区
    -
    #icon-yingyinqu
    -
    • - -
  • - -
    餐桌
    -
    #icon-canzhuo
    -
    • - -
  • - -
    抽油烟机
    -
    #icon-chouyouyanji
    -
    • - -
  • - -
    空调
    -
    #icon-kongtiao
    -
    • - -
  • - -
    桌球区
    -
    #icon-zhuoqiuqu
    -
    • - -
  • - -
    暖气
    -
    #icon-nuanqi
    -
    • - -
  • - -
    沙发
    -
    #icon-shafa
    -
    • - -
  • - -
    健身房
    -
    #icon-jianshenfang
    -
    • - -
  • - -
    便利店
    -
    #icon-bianlidian
    -
    • - -
  • - -
    会客区
    -
    #icon-huikequ
    -
    • - -
  • - -
    24H安保
    -
    #icon-a-24Hanbao
    -
    • - -
  • - -
    社区活动
    -
    #icon-shequhuodong
    -
    • - -
  • - -
    冰箱
    -
    #icon-bingxiang
    -
    • - -
  • - -
    洗衣机
    -
    #icon-xiyiji
    -
    • - -
  • - -
    setting
    -
    #icon-setting
    -
    • - -
  • - -
    首页
    -
    #icon-shouye
    -
    • - -
  • - -
    安全保障
    -
    #icon-anquanbaozhang
    -
    • - -
  • - -
    预约
    -
    #icon-RectangleCopy
    -
    • - -
  • - -
    users 用户组
    -
    #icon-users
    -
    • - -
  • - -
    3.1 设置
    -
    #icon-31shezhi
    -
    • - -
  • - -
    远程费
    -
    #icon-yuanchengfei
    -
    • - -
  • - -
    24gl-userGroup
    -
    #icon-24gl-userGroup
    -
    • - -
  • - -
    后台管理
    -
    #icon-houtaiguanli
    -
    • - -
  • - -
    人员管理
    -
    #icon-renyuanguanli
    -
    • - -
  • - -
    首页-置灰
    -
    #icon-shouye-zhihui
    -
    • - -
  • - -
    down-circle
    -
    #icon-down-circle
    -
    • - -
-
-

Symbol 引用

-
- -

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 - 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

-
    -
  • 支持多色图标了，不再受单色限制。
    • -
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • -
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • -
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • -
-

使用步骤如下：

-

第一步：引入项目下面生成的 symbol 代码：

-
<script src="./iconfont.js"></script>
-
-

第二步：加入通用 CSS 代码（引入一次就行）：

-
<style>
-.icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-</style>
-
-

第三步：挑选相应图标并获取类名，应用于页面：

-
<svg class="icon" aria-hidden="true">
-  <use xlink:href="#icon-xxx"></use>
-</svg>
-
-
-
- -
-
- - -