{cl?F́ߛX4!&0u.ܙ;.aY"UI[0_$Ef&Å1wpWq G8 QJCKD} ⌣.$YuI K6f5)2sۭ1ct6ĺ O57O(9N *֊."{I÷ֽ r>^A]{e#mR.L%{-MTl%ȃe]Ԁ^lFμ3dUz}-Ep_bh2çGNAE!Lnz=h*Zg,4AǾ,`QX b%t]=lnWۡ"(O JX K/-~fĜfoHv/Ȟl+&ejx(TZ1[eFp@`yQӸ 3/{gTjhwZ/ּ(,57] M*<K:`q@HxcpZ =J(-# kqvbۿ}JMï P#6Oڇ%`NR=Z@MdWb!U%bs.=_RNG&G:T*ݑ9ة>v c*fq;w0$2sXNz)qڡlb$canE.>V2{}tv n9-Ѓ<@fUkܗN 4i ڠ]l; qf\mO"2D$Wc%QeALȕhUASU<T!̘{Hl`Z 3hN8I+KdG$βsYr>r(,v0M)A">ASK<3uvxqS6/7jV良+og<oE#62+M,"ULF/JG^u"|mY/cn)/95 ah w2e Cj- 4f_;Sn¬y|zˡvAkOBdd#kC.BGF?O])]ڡ_uׂΡiizҖo,LG o6KEODy7Yo iִشU)DA.;Ĝzt(v,#*芭"寏orua}J)̶zo8Д2IelM;Isgav~>C#ޚ>i˪M g\KS&5mEyNrhYXm+ 0K+sd{x ]K7|6ȋpOm<ߍ!! LR Rր{c)dWci @/腠qu:/t9 I(e(vq Sf8Xb5H9%F ZnKsyofTpOܛq(7G,uIBQ,IS}_(2>.hO%nbbcB&QW니?TJ]A!?"^gљ'AT@| pƖ{43tI˲_n~Ai6 fG TҿQ_zYjj5T ^ߝne`KGNwx-@wk,j TlŸx1lsIDm3ЛW8S ~ʓD{/<~GD!']W4} 1/(JD`*aQt2/.LOZqjI[DʃsFwdh=WCTŒ ʚӬBnv2+Ȅǖ7KCaС"eAZcbծ VzCc|1)[HծI,cz/,s7AMuDyojԳV[ ";.ʯ. (e+Ⳓw ayG3@y/R #mZrl1nd OZv͑ٔ0M&}R0 QcQ+P/f{;0[7Sx@$\2rUs -'HbxuRQ3Ik213O6..f~2#It."NBBA3N<Ė%LFpG㎓vBJQ:gcGv]Mi_->^s&)kZO'L *\xP"޾'z+>7/" Cwm1囗I4O S&k PBkv!}&l{&\Ԗ rj.KX2DzVaS^G.6FE ֮_5's@\_w Nل4XިNL!^{ AXܓRrBZHztGYM-ԯn=] Dv n~) 4ܑvuJAs {ھN!Ɨ&Z/ϵ3mmX2Z8ao$n͠Yoiv>LQy"m쟜as:"9!'.xHe(D̬,#_ўy+ujUM#C4Q#xY]/"֚+(\>L.9 1/"^nHt)ԌC>v'F 0~$ 70f;|W:U\xdr]lTʿ^eūF'x:6 P1RܬAG3U|wrDki*=B "6XB %h)=`YtWMx;Bv`Qq.! ߍEiz䒤\M?_=#p.ya'0ƖσUCo`5{;n6L/S-ѿ.ZlKDR0xܨTukE Y"Rj[Tt*d6y$^+؁3 [X.dd 3}k/c{{CmgOB{WU~ sK8o\|n)ĆrP0r1? ?+tDkuXq sZY+L)9ӚO݇q h _޾w<r&|fpKzJMG'!>2ĀZUy#zdFOcQ+MwG a=tfA5 ؄C2oX2̢B;a(杽s̖QOt֓J~Ή;odͣ3ĵ5cxv~ Yg:2"B J@yW)Jdu]FOj7cd ްke;(;aT$ݪ<ϐK^`wi{Cb6/x lYKF+ ͆gYt1ϡ< 6VP*dzW*#^* 'cJKMNJf\Ҹz3,ØƧ¯|V]Ff|.MMxM,M*AbY!*ַ& <Cf2Ηoꄼ(0m4Uؖ꬜!~4\IN}.1sxg1xXIUM}׈S=?؏ME. _rCC9gK>22TjCjO[^No]SrgoyaAhjPցJm"'|قo vo³ܗ!up'H6.+::n-ss ɍ|?ٔ9`IIGWZzתU l8 rƶR?A(K)e63vsFOUdWSJlt-ǟf g8tO"If5 \pk[z1> YP$VP$YyT4e~9lvi(1>,q( 72ىrR&k? XHb#f͖ί MXJ%RP\HB4![bztge".G`cf7JzFcBdM! 8X<6 H/3=18c8۾Ӷ^)Q*Jv9 R8s˰d`\iЧ@wӏcrv ,ўp@o^po!V78xoL2nH#}%nG7l /R=GF!8MJ&& SfY4w"/} e[|vbtDrRM; nQo_,f-o&}0#NA*ŀA}Ei?<+z |].ÈY><j\@8o9Fm{U?Sll8hm"hoēFiQ$Q,+:(qxBD1 pPlQRXB 2o=iF{ٻ /`\s|Sg4|8#fO}==.e c9E)UgnɊǪk!Ɣ,1892|2X[-M%ۼ\R])8M_ɏL%~ ^"·_Lt خ뿹>,Z %ŐLXl% :K,؄1,:cS=GS iZ~`˚FgB}Z`*0 ch՘փ:c5;H0!E6ު["*K"͍8Q_!Y} .PC xzOʭ'M3:CWvq#zة՜ixߏzqoZK2{oÁ(cV iSo}Qτ웻5A)Is:wcNmnx<`mtdMb^M\qBLkGn=-}2p"SjMR!ȳ6U!ECx=x<ḁEX סNWvN`Fu\dz.BGlБ[)jrtOH#(8[0WWelCy%?lF6h\EH NUbɉCB(b&󜪯"# uxChDf(ܧyU1G 9pkVҦxtFG1SnRVr|~#ܐ0H:YeNb;ѯ3%/ɬ/@&<ԥQEXj]%^w7(e~~-mǔ g*B.n56m\zзЭtX3*nC (#H$+z'͉L !E.Vt u;1>01vG֟1NRQ0'kT8Oac"(WC587T+OZj>VK [-0̥u;1`%5Aki%^X@?{g_۵KauPiнyKc![UDO_GnJ^v cߣ+T/N,m!vUί tԁK8ν@`Kq͕^7F_G`${I䛗)}ףЕ(Q5OP*7ڑ6*k{w҃-kƸ^;Y˧{Z+O[waMK_~~bvY S:{ngƣ >|lQ-;rb6lQ)1#~lK+(OL&:QfHYm0.|" DV`1i*ٴ_152jCQ I]nP$HXC$B%r)#QʥtFǷ=}不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

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

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

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

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

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

  • 首页
    #icon-shouye
  • 帮助
    #icon-bangzhu
  • 个人中心
    #icon-gerenzhongxin
  • 首页
    #icon-shouye1
  • 密码
    #icon-lock
  • 20用户名
    #icon-yonghuming
  • 退出
    #icon-tuichu
  • 下载
    #icon-xiazai

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>
0j.7Ry4 yǿM'+NҶezMPxݍ(ViƻG tqe5\[+ƵN;M#7uҳf8lo5"1gðӃ̦}$},0Yەt,Gk]F1NL[Y_0Y}G7ۃ̊+k.#CgG:_~s.FrP҉Pk w}!hd D_rL |يğf6'xw!5s7ag,0 d1T+lUPGr(4[te}LW$ }/)tr#\Qȱ{o"o`C3un isKKp6_'>6> |g1{\DL1w2kk}* I?٥Z/'gP/ЂgD Er37_b@:+>0jRVZ:r,Q( BHGO @ZvtxlQ4 Izr mLeViNˠɓ-,+Ķ.Ѽ- ^)B]\1q9RtPv)j5`0!c=al2Q`p-O͞tbm~|<<5$2#Yv뢝 F<&΄6z\ysOnny> {W>X%0{~O7T JuQw-w-s}ݢm4VHKwD!H2I߃r,Zz Bjjå ABI#=6A]됹U/La:ۏߞH$7G`|1+ ZQ u~O+'袄v-3M0\bA "n^a>i2mE o|J wFy{M~b?z36VB/HiA\QRH6@@*. )JKAç?dy8ؔQ*rA B`TznF ny{y&D6`Ѫ-/;d@*ZF2G ApM ,$&Od"g̅4D)gt¬eYu_UD,/!X 3S2٢a:me߸Sx^(rˤWJ"&#"Z*xA{x)+,! ̪i}0_lLӣuɿ^&`kPpK{?)?2}7xڣDAI;TxNOr,3%uNQtWlWX.~!ޑ~\i)B)!yW[ kٲ0`9%"Q ؀]Μ(