• ai-icon_AIzongjie
    
  • ai-icon_AIgaixie
    
  • ai-icon_fuzhi
    
  • ai-icon_AI shengcheng
    
  • ai-icon_quanping-117
    
  • ai-icon_Italic
    
  • ai-icon_bold
    
  • ai-icon_zimu2
    
  • ai-icon_zuoduiqi
    
  • ai-icon_zimu
    
  • ai-icon_quxiaoquanping
    
  • ai-icon_youcuiqi
    
  • ai-icon_xiugai
    
  • ai-icon_yinseguanli
    
  • ai-icon_yinseguanli2
    
  • ai-icon_juzhong
    
  • ai-icon_yinse
    
  • ai-icon_zidingyiliebiao
    
  • ai-icon_zuopinji
    
  • ai-icon_shuaxin
    
  • ai-icon_shengxu
    
  • ai-icon_paixu
    
  • ai-icon_jiangxu
    
  • ai-icon_paidui2
    
  • ai-icon_shenjiao
    
  • ai-icon_gantanhao
    
  • ai-icon_zhengque
    
  • ai-icon_qingkong
    
  • ai-icon_rili
    
  • ai-icon_xiangmu_xianming
    
  • ai-icon_touxiang
    
  • ai-icon_end
    
  • ai-icon_agentguanli_mianxing
    
  • ai-icon_xiadan_mianxing
    
  • ai-icon_wenjian
    
  • ai-icon_xiadna_xianxing
    
  • ai-icon_dingdan_mianxing
    
  • ai-icon_agentguanli_xianxing
    
  • ai-icon_xiangmu_xianxing
    
  • icon_AI Dubbing-2
    
  • ai-icon_ciku
    
  • ai-icon_down
    
  • ai-icon_up-2
    
  • ai-icon-paidui
    
  • ai-icon_up
    
  • ai-icon_suoxiao
    
  • ai-icon_quanping
    
  • ai-icon_download
    
  • ai-icon_X
    
  • ai-icon-more
    
  • ai-icon_bianji
    
  • ai-icon_AIgongju_xianxing
    
  • ai-icon_AIgongju_mianxing
    
  • ai-icon_zuopinguanli_mianxing
    
  • ai-icon_warn
    
  • ai-icon_shuyuguanli_mianxing
    
  • ai-icon_zuopinguanli_xianxing
    
  • ai-icon_success
    
  • ai-icon_shuyuguanli_xianxing
    
  • ai-icon_shouye_xianxing
    
  • ai-icon_tianjia
    
  • ai-icon_liebiaoshitu
    
  • ai-icon_action
    
  • ai-icon_shouye_mianxing
    
  • ai-icon_kapianshitu
    
  • ai-icon_deleted
    
  • ai-icon_fail
    
  • ai-icon_beizhu_xianxing
    
  • ai-icon_beizhu_mianxing
    
  • ai-icon_loading
    
  • ai-icon_baocunzhong
    
  • ai-icon_baocunchenggong
    
  • ai-icon_xinzeng
    
  • ai-icon_hebing
    
  • ai-icon_huanhang
    
  • ai-icon_daoru
    
  • ai-icon_yiwen
    
  • ai-icon_fanyi
    
  • ai-icon_shanchu
    
  • ai-icon_quanping
    
  • ai-icon_kuaitui
    
  • ai-icon_kuaijin
    
  • ai-icon_zanting2
    
  • ai-icon_bofang3
    
  • ai-icon_zimudaoru2
    
  • ai-icon_zimudaoru1
    
  • ai-icon_zimuQA2
    
  • ai-icon_zimuQA1
    
  • ai-icon-dianhua
    
  • ai-icon-shanchu red
    
  • ai-icon-Alipay
    
  • ai-icon-WeChat Pay
    
  • ai-icon-huiyuan
    
  • ai-icon-guanbi
    
  • ai-icon-caidan
    
  • ai-icon-danxiang
    
  • ai-icon-bangzhu
    
  • ai-icon_weixin
    
  • ai-icon-bofang
    
  • ai-icon-xise
    
  • ai-icon-xiazai
    
  • ai-icon-shangchauntupian
    
  • ai-icon-yijian
    
  • ai-icon-shang
    
  • ai-icon-naozhong
    
  • ai-icon-top
    
  • ai-icon-suiji
    
  • ai-icon-gantanhao
    
  • ai-icon-quan
    
  • ai-icon-shezhi
    
  • ai-icon-shezhi2
    
  • ai-icon-qiehuan
    
  • ai-icon-bofang2
    
  • ai-icon-lishijilu
    
  • ai-icon-laba
    
  • ai-icon-luyin
    
  • ai-icon-jieshu
    
  • ai-icon-dingdan
    
  • ai-icon-jishiqi
    
  • ai-icon-fenxiang
    
  • ai-icon-zuo
    
  • ai-icon-zanting
    
  • ai-icon-shuangxiang
    
  • ai-icon-wo
    
  • ai-icon-you
    
  • ai-icon-xia
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1758009696808'); /* IE9 */
  src: url('iconfont.eot?t=1758009696808#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('iconfont.woff2?t=1758009696808') format('woff2'),
       url('iconfont.woff?t=1758009696808') format('woff'),
       url('iconfont.ttf?t=1758009696808') format('truetype'),
       url('iconfont.svg?t=1758009696808#iconfont') format('svg');
}

第二步:定义使用 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"。

  • ai-icon_AIzongjie
    .yyq-icon-ai-icon_AIzongjie
  • ai-icon_AIgaixie
    .yyq-icon-ai-icon_AIgaixie
  • ai-icon_fuzhi
    .yyq-icon-ai-icon_fuzhi
  • ai-icon_AI shengcheng
    .yyq-icon-a-ai-icon_AIshengcheng
  • ai-icon_quanping-117
    .yyq-icon-ai-icon_quanping-117
  • ai-icon_Italic
    .yyq-icon-ai-icon_Italic
  • ai-icon_bold
    .yyq-icon-ai-icon_bold
  • ai-icon_zimu2
    .yyq-icon-ai-icon_zimu2
  • ai-icon_zuoduiqi
    .yyq-icon-ai-icon_zuoduiqi
  • ai-icon_zimu
    .yyq-icon-ai-icon_zimu
  • ai-icon_quxiaoquanping
    .yyq-icon-ai-icon_quxiaoquanping
  • ai-icon_youcuiqi
    .yyq-icon-ai-icon_youcuiqi
  • ai-icon_xiugai
    .yyq-icon-ai-icon_xiugai
  • ai-icon_yinseguanli
    .yyq-icon-ai-icon_yinseguanli
  • ai-icon_yinseguanli2
    .yyq-icon-ai-icon_yinseguanli2
  • ai-icon_juzhong
    .yyq-icon-ai-icon_juzhong
  • ai-icon_yinse
    .yyq-icon-ai-icon_yinse
  • ai-icon_zidingyiliebiao
    .yyq-icon-ai-icon_zidingyiliebiao
  • ai-icon_zuopinji
    .yyq-icon-ai-icon_zuopinji
  • ai-icon_shuaxin
    .yyq-icon-ai-icon_shuaxin
  • ai-icon_shengxu
    .yyq-icon-ai-icon_shengxu
  • ai-icon_paixu
    .yyq-icon-ai-icon_paixu
  • ai-icon_jiangxu
    .yyq-icon-ai-icon_jiangxu
  • ai-icon_paidui2
    .yyq-icon-ai-icon_paidui2
  • ai-icon_shenjiao
    .yyq-icon-ai-icon_shenjiao
  • ai-icon_gantanhao
    .yyq-icon-ai-icon_gantanhao
  • ai-icon_zhengque
    .yyq-icon-ai-icon_zhengque
  • ai-icon_qingkong
    .yyq-icon-ai-icon_qingkong
  • ai-icon_rili
    .yyq-icon-ai-icon_rili
  • ai-icon_xiangmu_xianming
    .yyq-icon-ai-icon_xiangmu_xianming1
  • ai-icon_touxiang
    .yyq-icon-ai-icon_touxiang
  • ai-icon_end
    .yyq-icon-ai-icon_end
  • ai-icon_agentguanli_mianxing
    .yyq-icon-ai-icon_agentguanli_mianxing
  • ai-icon_xiadan_mianxing
    .yyq-icon-ai-icon_xiadan_mianxing
  • ai-icon_wenjian
    .yyq-icon-ai-icon_wenjian
  • ai-icon_xiadna_xianxing
    .yyq-icon-ai-icon_xiadna_xianxing
  • ai-icon_dingdan_mianxing
    .yyq-icon-ai-icon_dingdan_mianxing
  • ai-icon_agentguanli_xianxing
    .yyq-icon-ai-icon_agentguanli_xianxing
  • ai-icon_xiangmu_xianxing
    .yyq-icon-ai-icon_xiangmu_xianxing
  • icon_AI Dubbing-2
    .yyq-icon-a-icon_AIDubbing-2
  • ai-icon_ciku
    .yyq-icon-ai-icon_ciku
  • ai-icon_down
    .yyq-icon-ai-icon_down
  • ai-icon_up-2
    .yyq-icon-ai-icon_up-2
  • ai-icon-paidui
    .yyq-icon-ai-icon-paidui
  • ai-icon_up
    .yyq-icon-ai-icon_up
  • ai-icon_suoxiao
    .yyq-icon-ai-icon_suoxiao
  • ai-icon_quanping
    .yyq-icon-ai-icon_quanping1
  • ai-icon_download
    .yyq-icon-ai-icon_download
  • ai-icon_X
    .yyq-icon-ai-icon_X
  • ai-icon-more
    .yyq-icon-ai-icon-more
  • ai-icon_bianji
    .yyq-icon-ai-icon_bianji1
  • ai-icon_AIgongju_xianxing
    .yyq-icon-ai-icon_AIgongju_xianxing
  • ai-icon_AIgongju_mianxing
    .yyq-icon-ai-icon_AIgongju_mianxing
  • ai-icon_zuopinguanli_mianxing
    .yyq-icon-ai-icon_zuopinguanli_mianxing
  • ai-icon_warn
    .yyq-icon-ai-icon_warn
  • ai-icon_shuyuguanli_mianxing
    .yyq-icon-ai-icon_shuyuguanli_mianxing
  • ai-icon_zuopinguanli_xianxing
    .yyq-icon-ai-icon_zuopinguanli_xianxing
  • ai-icon_success
    .yyq-icon-ai-icon_success
  • ai-icon_shuyuguanli_xianxing
    .yyq-icon-ai-icon_shuyuguanli_xianxing
  • ai-icon_shouye_xianxing
    .yyq-icon-ai-icon_shouye_xianxing
  • ai-icon_tianjia
    .yyq-icon-ai-icon_tianjia
  • ai-icon_liebiaoshitu
    .yyq-icon-ai-icon_liebiaoshitu
  • ai-icon_action
    .yyq-icon-ai-icon_action
  • ai-icon_shouye_mianxing
    .yyq-icon-ai-icon_shouye_mianxing
  • ai-icon_kapianshitu
    .yyq-icon-ai-icon_kapianshitu
  • ai-icon_deleted
    .yyq-icon-ai-icon_deleted
  • ai-icon_fail
    .yyq-icon-ai-icon_fail
  • ai-icon_beizhu_xianxing
    .yyq-icon-ai-icon_beizhu_xianxing
  • ai-icon_beizhu_mianxing
    .yyq-icon-ai-icon_beizhu_mianxing
  • ai-icon_loading
    .yyq-icon-ai-icon_loading
  • ai-icon_baocunzhong
    .yyq-icon-ai-icon_baocunzhong
  • ai-icon_baocunchenggong
    .yyq-icon-ai-icon_baocunchenggong
  • ai-icon_xinzeng
    .yyq-icon-ai-icon_xinzeng
  • ai-icon_hebing
    .yyq-icon-ai-icon_hebing
  • ai-icon_huanhang
    .yyq-icon-ai-icon_huanhang
  • ai-icon_daoru
    .yyq-icon-ai-icon_daoru
  • ai-icon_yiwen
    .yyq-icon-ai-icon_yiwen
  • ai-icon_fanyi
    .yyq-icon-ai-icon_fanyi
  • ai-icon_shanchu
    .yyq-icon-ai-icon_shanchu
  • ai-icon_quanping
    .yyq-icon-ai-icon_quanping
  • ai-icon_kuaitui
    .yyq-icon-ai-icon_kuaitui
  • ai-icon_kuaijin
    .yyq-icon-ai-icon_kuaijin
  • ai-icon_zanting2
    .yyq-icon-ai-icon_zanting2
  • ai-icon_bofang3
    .yyq-icon-ai-icon_bofang3
  • ai-icon_zimudaoru2
    .yyq-icon-ai-icon_zimudaoru2
  • ai-icon_zimudaoru1
    .yyq-icon-ai-icon_zimudaoru1
  • ai-icon_zimuQA2
    .yyq-icon-ai-icon_zimuQA2
  • ai-icon_zimuQA1
    .yyq-icon-ai-icon_zimuQA1
  • ai-icon-dianhua
    .yyq-icon-ai-icon-dianhua
  • ai-icon-shanchu red
    .yyq-icon-a-ai-icon-shanchured
  • ai-icon-Alipay
    .yyq-icon-ai-icon-Alipay
  • ai-icon-WeChat Pay
    .yyq-icon-a-ai-icon-WeChatPay
  • ai-icon-huiyuan
    .yyq-icon-ai-icon-huiyuan
  • ai-icon-guanbi
    .yyq-icon-ai-icon-guanbi
  • ai-icon-caidan
    .yyq-icon-ai-icon-caidan
  • ai-icon-danxiang
    .yyq-icon-ai-icon-danxiang
  • ai-icon-bangzhu
    .yyq-icon-ai-icon-bangzhu
  • ai-icon_weixin
    .yyq-icon-ai-icon_weixin
  • ai-icon-bofang
    .yyq-icon-ai-icon-bofang
  • ai-icon-xise
    .yyq-icon-ai-icon-xise
  • ai-icon-xiazai
    .yyq-icon-ai-icon-xiazai
  • ai-icon-shangchauntupian
    .yyq-icon-ai-icon-shangchauntupian
  • ai-icon-yijian
    .yyq-icon-ai-icon-yijian
  • ai-icon-shang
    .yyq-icon-ai-icon-shang
  • ai-icon-naozhong
    .yyq-icon-ai-icon-naozhong
  • ai-icon-top
    .yyq-icon-ai-icon-top
  • ai-icon-suiji
    .yyq-icon-ai-icon-suiji
  • ai-icon-gantanhao
    .yyq-icon-ai-icon-gantanhao
  • ai-icon-quan
    .yyq-icon-ai-icon-quan
  • ai-icon-shezhi
    .yyq-icon-ai-icon-shezhi
  • ai-icon-shezhi2
    .yyq-icon-ai-icon-shezhi2
  • ai-icon-qiehuan
    .yyq-icon-ai-icon-qiehuan
  • ai-icon-bofang2
    .yyq-icon-ai-icon-bofang2
  • ai-icon-lishijilu
    .yyq-icon-ai-icon-lishijilu
  • ai-icon-laba
    .yyq-icon-ai-icon-laba
  • ai-icon-luyin
    .yyq-icon-ai-icon-luyin
  • ai-icon-jieshu
    .yyq-icon-ai-icon-jieshu
  • ai-icon-dingdan
    .yyq-icon-ai-icon-dingdan
  • ai-icon-jishiqi
    .yyq-icon-ai-icon-jishiqi
  • ai-icon-fenxiang
    .yyq-icon-ai-icon-fenxiang
  • ai-icon-zuo
    .yyq-icon-ai-icon-zuo
  • ai-icon-zanting
    .yyq-icon-ai-icon-zanting
  • ai-icon-shuangxiang
    .yyq-icon-ai-icon-shuangxiang
  • ai-icon-wo
    .yyq-icon-ai-icon-wo
  • ai-icon-you
    .yyq-icon-ai-icon-you
  • ai-icon-xia
    .yyq-icon-ai-icon-xia

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • ai-icon_AIzongjie
    #yyq-icon-ai-icon_AIzongjie
  • ai-icon_AIgaixie
    #yyq-icon-ai-icon_AIgaixie
  • ai-icon_fuzhi
    #yyq-icon-ai-icon_fuzhi
  • ai-icon_AI shengcheng
    #yyq-icon-a-ai-icon_AIshengcheng
  • ai-icon_quanping-117
    #yyq-icon-ai-icon_quanping-117
  • ai-icon_Italic
    #yyq-icon-ai-icon_Italic
  • ai-icon_bold
    #yyq-icon-ai-icon_bold
  • ai-icon_zimu2
    #yyq-icon-ai-icon_zimu2
  • ai-icon_zuoduiqi
    #yyq-icon-ai-icon_zuoduiqi
  • ai-icon_zimu
    #yyq-icon-ai-icon_zimu
  • ai-icon_quxiaoquanping
    #yyq-icon-ai-icon_quxiaoquanping
  • ai-icon_youcuiqi
    #yyq-icon-ai-icon_youcuiqi
  • ai-icon_xiugai
    #yyq-icon-ai-icon_xiugai
  • ai-icon_yinseguanli
    #yyq-icon-ai-icon_yinseguanli
  • ai-icon_yinseguanli2
    #yyq-icon-ai-icon_yinseguanli2
  • ai-icon_juzhong
    #yyq-icon-ai-icon_juzhong
  • ai-icon_yinse
    #yyq-icon-ai-icon_yinse
  • ai-icon_zidingyiliebiao
    #yyq-icon-ai-icon_zidingyiliebiao
  • ai-icon_zuopinji
    #yyq-icon-ai-icon_zuopinji
  • ai-icon_shuaxin
    #yyq-icon-ai-icon_shuaxin
  • ai-icon_shengxu
    #yyq-icon-ai-icon_shengxu
  • ai-icon_paixu
    #yyq-icon-ai-icon_paixu
  • ai-icon_jiangxu
    #yyq-icon-ai-icon_jiangxu
  • ai-icon_paidui2
    #yyq-icon-ai-icon_paidui2
  • ai-icon_shenjiao
    #yyq-icon-ai-icon_shenjiao
  • ai-icon_gantanhao
    #yyq-icon-ai-icon_gantanhao
  • ai-icon_zhengque
    #yyq-icon-ai-icon_zhengque
  • ai-icon_qingkong
    #yyq-icon-ai-icon_qingkong
  • ai-icon_rili
    #yyq-icon-ai-icon_rili
  • ai-icon_xiangmu_xianming
    #yyq-icon-ai-icon_xiangmu_xianming1
  • ai-icon_touxiang
    #yyq-icon-ai-icon_touxiang
  • ai-icon_end
    #yyq-icon-ai-icon_end
  • ai-icon_agentguanli_mianxing
    #yyq-icon-ai-icon_agentguanli_mianxing
  • ai-icon_xiadan_mianxing
    #yyq-icon-ai-icon_xiadan_mianxing
  • ai-icon_wenjian
    #yyq-icon-ai-icon_wenjian
  • ai-icon_xiadna_xianxing
    #yyq-icon-ai-icon_xiadna_xianxing
  • ai-icon_dingdan_mianxing
    #yyq-icon-ai-icon_dingdan_mianxing
  • ai-icon_agentguanli_xianxing
    #yyq-icon-ai-icon_agentguanli_xianxing
  • ai-icon_xiangmu_xianxing
    #yyq-icon-ai-icon_xiangmu_xianxing
  • icon_AI Dubbing-2
    #yyq-icon-a-icon_AIDubbing-2
  • ai-icon_ciku
    #yyq-icon-ai-icon_ciku
  • ai-icon_down
    #yyq-icon-ai-icon_down
  • ai-icon_up-2
    #yyq-icon-ai-icon_up-2
  • ai-icon-paidui
    #yyq-icon-ai-icon-paidui
  • ai-icon_up
    #yyq-icon-ai-icon_up
  • ai-icon_suoxiao
    #yyq-icon-ai-icon_suoxiao
  • ai-icon_quanping
    #yyq-icon-ai-icon_quanping1
  • ai-icon_download
    #yyq-icon-ai-icon_download
  • ai-icon_X
    #yyq-icon-ai-icon_X
  • ai-icon-more
    #yyq-icon-ai-icon-more
  • ai-icon_bianji
    #yyq-icon-ai-icon_bianji1
  • ai-icon_AIgongju_xianxing
    #yyq-icon-ai-icon_AIgongju_xianxing
  • ai-icon_AIgongju_mianxing
    #yyq-icon-ai-icon_AIgongju_mianxing
  • ai-icon_zuopinguanli_mianxing
    #yyq-icon-ai-icon_zuopinguanli_mianxing
  • ai-icon_warn
    #yyq-icon-ai-icon_warn
  • ai-icon_shuyuguanli_mianxing
    #yyq-icon-ai-icon_shuyuguanli_mianxing
  • ai-icon_zuopinguanli_xianxing
    #yyq-icon-ai-icon_zuopinguanli_xianxing
  • ai-icon_success
    #yyq-icon-ai-icon_success
  • ai-icon_shuyuguanli_xianxing
    #yyq-icon-ai-icon_shuyuguanli_xianxing
  • ai-icon_shouye_xianxing
    #yyq-icon-ai-icon_shouye_xianxing
  • ai-icon_tianjia
    #yyq-icon-ai-icon_tianjia
  • ai-icon_liebiaoshitu
    #yyq-icon-ai-icon_liebiaoshitu
  • ai-icon_action
    #yyq-icon-ai-icon_action
  • ai-icon_shouye_mianxing
    #yyq-icon-ai-icon_shouye_mianxing
  • ai-icon_kapianshitu
    #yyq-icon-ai-icon_kapianshitu
  • ai-icon_deleted
    #yyq-icon-ai-icon_deleted
  • ai-icon_fail
    #yyq-icon-ai-icon_fail
  • ai-icon_beizhu_xianxing
    #yyq-icon-ai-icon_beizhu_xianxing
  • ai-icon_beizhu_mianxing
    #yyq-icon-ai-icon_beizhu_mianxing
  • ai-icon_loading
    #yyq-icon-ai-icon_loading
  • ai-icon_baocunzhong
    #yyq-icon-ai-icon_baocunzhong
  • ai-icon_baocunchenggong
    #yyq-icon-ai-icon_baocunchenggong
  • ai-icon_xinzeng
    #yyq-icon-ai-icon_xinzeng
  • ai-icon_hebing
    #yyq-icon-ai-icon_hebing
  • ai-icon_huanhang
    #yyq-icon-ai-icon_huanhang
  • ai-icon_daoru
    #yyq-icon-ai-icon_daoru
  • ai-icon_yiwen
    #yyq-icon-ai-icon_yiwen
  • ai-icon_fanyi
    #yyq-icon-ai-icon_fanyi
  • ai-icon_shanchu
    #yyq-icon-ai-icon_shanchu
  • ai-icon_quanping
    #yyq-icon-ai-icon_quanping
  • ai-icon_kuaitui
    #yyq-icon-ai-icon_kuaitui
  • ai-icon_kuaijin
    #yyq-icon-ai-icon_kuaijin
  • ai-icon_zanting2
    #yyq-icon-ai-icon_zanting2
  • ai-icon_bofang3
    #yyq-icon-ai-icon_bofang3
  • ai-icon_zimudaoru2
    #yyq-icon-ai-icon_zimudaoru2
  • ai-icon_zimudaoru1
    #yyq-icon-ai-icon_zimudaoru1
  • ai-icon_zimuQA2
    #yyq-icon-ai-icon_zimuQA2
  • ai-icon_zimuQA1
    #yyq-icon-ai-icon_zimuQA1
  • ai-icon-dianhua
    #yyq-icon-ai-icon-dianhua
  • ai-icon-shanchu red
    #yyq-icon-a-ai-icon-shanchured
  • ai-icon-Alipay
    #yyq-icon-ai-icon-Alipay
  • ai-icon-WeChat Pay
    #yyq-icon-a-ai-icon-WeChatPay
  • ai-icon-huiyuan
    #yyq-icon-ai-icon-huiyuan
  • ai-icon-guanbi
    #yyq-icon-ai-icon-guanbi
  • ai-icon-caidan
    #yyq-icon-ai-icon-caidan
  • ai-icon-danxiang
    #yyq-icon-ai-icon-danxiang
  • ai-icon-bangzhu
    #yyq-icon-ai-icon-bangzhu
  • ai-icon_weixin
    #yyq-icon-ai-icon_weixin
  • ai-icon-bofang
    #yyq-icon-ai-icon-bofang
  • ai-icon-xise
    #yyq-icon-ai-icon-xise
  • ai-icon-xiazai
    #yyq-icon-ai-icon-xiazai
  • ai-icon-shangchauntupian
    #yyq-icon-ai-icon-shangchauntupian
  • ai-icon-yijian
    #yyq-icon-ai-icon-yijian
  • ai-icon-shang
    #yyq-icon-ai-icon-shang
  • ai-icon-naozhong
    #yyq-icon-ai-icon-naozhong
  • ai-icon-top
    #yyq-icon-ai-icon-top
  • ai-icon-suiji
    #yyq-icon-ai-icon-suiji
  • ai-icon-gantanhao
    #yyq-icon-ai-icon-gantanhao
  • ai-icon-quan
    #yyq-icon-ai-icon-quan
  • ai-icon-shezhi
    #yyq-icon-ai-icon-shezhi
  • ai-icon-shezhi2
    #yyq-icon-ai-icon-shezhi2
  • ai-icon-qiehuan
    #yyq-icon-ai-icon-qiehuan
  • ai-icon-bofang2
    #yyq-icon-ai-icon-bofang2
  • ai-icon-lishijilu
    #yyq-icon-ai-icon-lishijilu
  • ai-icon-laba
    #yyq-icon-ai-icon-laba
  • ai-icon-luyin
    #yyq-icon-ai-icon-luyin
  • ai-icon-jieshu
    #yyq-icon-ai-icon-jieshu
  • ai-icon-dingdan
    #yyq-icon-ai-icon-dingdan
  • ai-icon-jishiqi
    #yyq-icon-ai-icon-jishiqi
  • ai-icon-fenxiang
    #yyq-icon-ai-icon-fenxiang
  • ai-icon-zuo
    #yyq-icon-ai-icon-zuo
  • ai-icon-zanting
    #yyq-icon-ai-icon-zanting
  • ai-icon-shuangxiang
    #yyq-icon-ai-icon-shuangxiang
  • ai-icon-wo
    #yyq-icon-ai-icon-wo
  • ai-icon-you
    #yyq-icon-ai-icon-you
  • ai-icon-xia
    #yyq-icon-ai-icon-xia

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>