Unicode 引用
Unicode 是字体在网页端最原始的应用方式,特点是:
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 默认情况下不支持多色,直接添加多色图标会自动去色。
注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)
Unicode 使用步骤如下:
第一步:拷贝项目下面生成的 @font-face
@font-face {
font-family: 'iconfont';
src:
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABaIAAsAAAAAJiAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAARAAAAGA83EnBY21hcAAAAYgAAAFQAAADykpn7tVnbHlmAAAC2AAAEC4AABrg7aUth2hlYWQAABMIAAAAMQAAADYnuHtpaGhlYQAAEzwAAAAgAAAAJAfdA65obXR4AAATXAAAABUAAAC0tAH//mxvY2EAABN0AAAAXAAAAFyeIKTCbWF4cAAAE9AAAAAfAAAAIAFJAIFuYW1lAAAT8AAAAUAAAAJnEKM8sHBvc3QAABUwAAABVwAAAg9R/xUYeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGFhYJzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnh179pG54X8DAwPzHYZGoDAjiiImAJWbDhh4nO3TaVIUQRiE4XcWVgdZFRCFYUecA3Igf3EQUFwQlVVARUgQBeUEY9Ykx7Ajnoroiumuic78gC6gZi2rQ2WdCuV66d1KZ79Gf2e/zlrnN/Wyr7t22+tGWX3vJ5lngUWWWGaF56zyws9O8oQpnvKMaWZoMsscQwwzwihjPOIx40zwkEGfUvd/6aaHXvp84gMaDPjNVb++m/9XoyzV5v1dq3z78HdHm+EE0KtwFuh1OBW0Fc4HvQknhd6GM0Pvwumh9+Ec0XZ0zv0QzhbthFNGH8N5o0/h5NHncAfQbrgNaC/cC7Qfbgg6CHcFHYZbg47C/UFfwk1Cx+FOoZNwu9BpuGfoa7hx6Fu4e+h7uIXoLNxH9CPcTHQe7ii6iDIxUpTu6zLKNOkq3GX0M9xqdB3uN/oVbjr6HWXKdBNuP7qNkrz+hCcC/Y1MYVD9ByUTrRt4nK1Ye2wbx5mfB7lLLp/LJXe1pESJXD5kUqKk5UtvK7blyJIsJamXtiXbtZ04caTEaB6O7T9yZVrADZCkaJrIjlPgekCKS068ItdrLznnHvAVuV6Lw+EQKPYdeu3BTfq0eofeC01x5eq+WVKWHwrgoEcuZ2eG33zzzTff9/u+GWRDaO0yrdEsCqItyED7EZIK5VK5pCuyIgd5jufi6VQ6heOsGmSdOvu7wDppEUjzuhIlPOfDHKNow+ViobQVA0k6h9MpLd7oVUL5Yi3XPTP7zuxMd+56BRtP3n+kf2io/8j9P1+v/JVX6pRFv4jtzoDL55Dd/orgiSleBZNMPNG1u0tyOp+o4OrBmzixCnHcxMiqmDUh6IURYZnz+AQPLwfbYjIOuQKetpDU3qmNScFcMKy0CKuVCkKIgj5WaJXqoI3taBdCmC25nYh8WuG5xteH2eLZtweX+bRorbZsF2Wl8WUt9hUZDdDb+XRZKRMU2lftTLd24kyG2jipI7d9zwm3+8Se7bkOibPRTAanop3p6j7zms3ujySL2+fmtheTEb/dtmXL0wcOPN2J/+W/fn/46Nu0z623C5zNZp6z8bxXFPv1icK2Dko7thUm9H5R9PK8DS/YbLyzXf8z8xd+Xy4zmCm1tpYyg1t6fH6s8EK0tzcqXGDs/hwhZgP/QE+BDQgohHJoEFadHqW6zHtxD4bt1OWQGORpkW0oNJQozuulsuLFfCjIxVN2nAIaBcvQIP8z6vTyaqKF2tUv/3pqYYq+cfQ5H21JqDbfU9PatshIx2SnmlDxXD3rVpIucsWlJDAZ9XUkWsKB+NYHPuorTk0V15BbMM/t9zx3fyCsBqYOy6ERNWbfH1DVreSyO6G46hlXUmnu14b9DoDkmxkq3tykwS6D8hDWSyO4kNIIut2i6h/dblG4EkkmI8usIJdvN2mzdrtJY2dzABTrMl+hFaShLlREKAlq1OKWv4C2QSA5BAsAO4tipTwKFpjXZaqV03xRE2PlUJ5XoBCpoYovf+Fz3ysPqIGlgNpi4xyHcl+aP+RUXJOzorp8bjV7bQyjjPVeAoqB8vc+94WXRVUVZyddiuPTcy/mDjntthYVX1jNXFtaQ9Ux9sagVkRYQf+GrKJ21A2YEOfABCxdFVJZLMZELc412kURdIdj+ijYSioOMBDFS5qua+dhswLnyZXX2YSvs576z/Gc24cdX3e0wA/7yKqeMHdpuqqp+G1zF7x0Db+d0OttfsVx0QGP4mdiWALR75MR2GGUZDaZwz0k1QAXH/ZimDTFOkvruxwFMKKPORTXccFHE1I4AnZbjPg16heOu2THbskpt9x/4LPf/b2DR1tkp/QbB0ej1CssujwOlyy4FgUvtDmgy3e7+6JbtkT73N15qamXtWVr7/xIBWlELaTBXgTlfAwQLl9M5pk6YqEYzlaWl/UEXq4sr6EKLLSGjRpZXq6YlYQOLwMbCb1yi/2WPpn9enEwikHxhRy+Y+Ot5WZzudkDrLhj621vDoBiXQdrNAMyu1EnkzgFNtAACe5GkACMGMUWijRwgiBw7YWpqcMbiHDhpM/GwML73P0MFLKTJYwa/l+aXEP7vOv+f2QyoIYDR17w7gOr2rCJh8gPmU3AJO3gKz6srENwuWT1gH97GVjnLMQexXm86ApyBTu265zTK0VSxbD0gBByHnK5or3q8cqpF0a6NKeYiZAfuIVDzpDwgBxRtUhKcVEdBhW4oPuRSEZ0al0jLzy197jaG2Vi2Cx91GArHUhEYfBqhItaiLlH0V60DEQvYY3BDZhITCuCO7dhjYaMZKRWXzLO1SJJsgiFca4+xhoGWVyqhVMVubZUSZl/kgqzd7j2cXOtM0yuT4HXJ02ui0ENi2F9lZVLZLHCmnXEuJIaE2MVfufqS7VzRrLXEqG5z9cgFsowFzgiFvNiWYFYRoFrDH74cuX0yNWrI88aFBl4Fn/HHDw9fPXqsHnGWF42Gjh3jZ6D8QrImWZaycPAPEhm2YoWa1hOXmnw04qxkGaPiTEM7CqGwQCzboGtMUaqY4a5bJCxepVUyWoGPqlwvWqBcBXWdOkS9Kyal5iOeJi3Sl+lz4DUMhqFOD4Jmc0htgIwB5g1h2FasIZYH+xKqkjjfCo9ilNaClwLjMcK8qEgi3LgdrICZRHcULNrpTInlZS8zKeAqAjNoqxoSipdiuIQl6avthfb638KBTz4TRz4gdLuiHV0qh4SFIWAzeNy+OT4XS1ewefo7Bsei3UprqDT22H+iHoV18OUUIfDM5TQiOgNtNATfp8n4nYJ5MH68+2FdnhoKxTmT6OK+aKjM58bi2LBKXe1dUzsiIa9wNR5KOJvp3aHCvWXZEHG4xi3tbX+pdNLk2kaDQcwT7HdRknTjjZ0lLFi/ubaka7vVQESHb0dAxAlmb0FuSy4PoTOUn6zlb9sd3D1D+0cedsRdh553+41d7pF0d3v9vvdm63pv+28+W3OwTtslwXhsav2R/3uMqOFAuQNrK2tVW2IVqHuRh7A3jBKgU3lUQGNobvQbjSD5tA8eggdR08iJEJkAglBQJDv4xv4/5XMeNS45cFPVh6p3PLgk7fT0WrjbT7foDGfa7TJLz5Zf8NnV+kSHYF4AnEbA+wx/OUAjhUZ4BjS8lQSYkkDJzke/NnbTGfLJfLawMz09MzjoWAw9DirPRGET/3Hu44dOfrA5I7WiDZ8YeSVqXf2H9wxGYYP+fzAzaRPsNpJ67/JHQf3vzP1ysiFYS3SumPygaNHjq3Hjn+jL9E46kGfAvnAoAhfCjFhwOuYpDzH8up4mYd0Yt3iRvFWELJQVuS+JpUP90JCnubbsVwuWesql3oILId8VSpKZ2k6bbMRu+DJ5L+5b2I83+31uLEo8mcl6UygKO0J9C8khD2BwLOdDqen8/RdQUn0+cIn5hfc0WR5ZOa1bs3F28jC3AmB+iTpLC+K2O32defHJ/Z9M5/xCHZis6XT9CzMdSYQ2CMkFvoDe6Ri4A99ohS863Snx+no7BROzC0QG+/Sul+bGSkno+6F+RPh23LW4ieJ+ckGslupxk0hf3cOPrs3D/lXKtVqpQrRHgjeuWnIZtH+q4y4un4WWseIIPjb7QhBiwovNTD0ZgT44L33PrBQ4BZPr//rmTNnyFeYw0MEA5/+7KY+fYv/5mM6YBBMDNPe5IuxTdyPQuT47fJ111t3txtczGw3DPyjCn7yRhdsYuJliHdZJEHEakUdDfuEcw2P2fk2R9hJD1LyNJ/GfNkeK8bIvWABpwIBc8onP+OLBF3YhUX88v7d+3v3m9cch8muOqiRtgQCp4DQnPZTH3YGw76zLSKOANUHQHXMZVp5ICj8VdoLUjhBF3DuhLgOp2bMzo5p8ncr9ddXjHn86vzwfPcc7WFNbQ5fmB+e655vxDwYz/ICN+gxiXSIexNoL/CBjdKjLA+CbSvfmDJKjX+s1OymP7C1tzpLn2ISSyliRchp7fBPFocaqQbIFWrrG+xrs4rFwr5CYd9xVvzaFVSCLkjlM/EhTRsaH4rHh+oHIefECIr6ck3T8TKk+TVtKF6piGr1Chlra7Jp6/thkwsU5qor6IIH8r0vN/mMD2nmWG4mB08NI12rVDTdgGkqqphl+2eH/XuD/jPdi+JgQ9sgGkAkkNjJNIq9BEDFC2eEcrGx7DZ2UIHdTBWwFcx46092Eiw1OiyFsSYtRYliaWmEaYdrUpapRcaYjOIoaXQz+rJHc9OKg7OLsuy4OPPuN44TSyl46pkXh+p/4KZIVO20TQtSm2r+LKC6g3LQrZbSeyczGJLg5EDJ44i3uxzhUn9Abe3NBxyK7Oc4R/LY4UGV7nK7f7vskGXRzjkujoT2/tFRw80U5a5MPL3dlSWH3Zr5rhowolExxLeJsmIEVPOkKj7VUOdTokr+UeJy010X2fnsYlvOq0b8Ln/cXwibP1UD1XA2KEgOjvPLiiMRTFcK1YDa8A2wr2+TS4AFbYBavU3USgNGdQBG8QyxQLEs987ByZpXWOq/Xof/IcEi6DMPHZ0aqTx+CttOPb53dOroQ+ZS7+df3D7Ws3X4a9/62vDFlh1TO5S7Eg9+5sHEquSbmpLHyGJ318zgAb1Q0A8MznR1m+8VB6NthcFtExPbvtHa3hEpZ3O57H4nECue6z68CD7sQQHIbMLsPquUjynr+SaG/FLkwXUppM1LcEB77009Ub+S0InNvI9kFsxlXKleuUIuJ/Q3628mdD1BlusVknu3soaaOe336Rs0CvGrHw2x7DvNQ/6alxuJI5xBrLsf1mT1vFLuwRpvRVjWnwedsXqew1qZLP279CnfTw67vOmiPr4lyydatfh9Q0P3JVPijtnOtzrv2XFsj45jHeN6Me11Hf5urKsr5uDe4vDAY/3k0iFxt5GIHRxOpVqCdMYTkHpyPbmQ1PnH7ceOtdd+dRr7pVRq5EBcS8zq+mwAUGr42fUzRCMvZ1jRba3iY1GCxr2EXZMAIDDnyBEAgrKFD7BEgAZcjQ/tZN4JRXXw6MDA0SdZ8ZOcsY3l5uzWY5uRM0Nbgv0duNLRH9wCGfyY1hwRH/qoOQAKM9vaf2/vGMvpx3rv7W+9PKCJkiRqA9n1+wiGbwqKNPd0/RQRsk4VRba7EmyukQqTK+FUKmxeWjKrS+YlOB6QZXKJ8TWzkSTEh0oygi+ZBq5Z+7lMK9Z5vgMQE7FTNbC1lg/hJod58G7WY6kGenjoAxrL9QEWZKaWUWJBQ6O7QUjQxkF7IZDvbVXSubRSs5Bg5tk94Oh7np2xWuMnnz85Tg1ANfOyNQZwFhonAoKUDZuXlbQCD85qv2n4uWG8dNi1j12q7HMdfsloer+x8+T4+MmdFgb+Lb2HDsHeZlEfGoGzD8I3o/v1vCLEEgtF9hIW0yG45bDCx9JcXGrQ59llD3+jZRB09+mdO09/kRXmw7mu6dm3Zqe7conE6KM2LIhC/QoU2Pbo1ru/cw/+1j3bvjTRklHVTEuqWPz7rum56S6rIL9iLO6+m/Ex/3d+ZpplJNMz8/dOjPd86JT8guCXnB/2fvHHb7zRhpdbMn2ZluJUca67Mby7e/o6HlUBjyjEPhdYBYIwBb5djLG3VLIOKCyFLNMqi8Fst9m7jr7ukmXXa4JAFg1zqWIuGXiRd3tWPG7+YV7hNuctNflav0KJ5QTs0qlYZQwxsN5gb/F+zSVvsDfcHn6Ba+EWeI8b3Zb/9XySG3cJwKas3OFF+qdXVobPn7/ji3Lp/feB/HeTjyogX/oO5fvPc+eGV1buWL5fnj8P5L+r/iB5u1P9CefPj6y8f6fy1f96Xb7G3dQQeczK46yb8WbaXMa/dLQ4cAdPfEL9kuAjPHlIEMxXHEGvN+hAN4xl8QslYSU41UzGeBKEseZVNpaMsbEXBAEfbw5tXNr+B/kLa04rY21m6Qr52cYU+OVbeGxqj3hDixuaxRta3NAstZJhAK87ukj8eIPc9NzyTysrI8wgG2urNdcGIuFSE5HTWN3QAX7kFt3CqP8DX6t+ZQAAeJxjYGRgYADiDGFbx3h+m68M3CwMIPDIV3objP7//389CwNzI5DLwcAEEgUAEg0KuAAAAHicY2BkYGBu+N/AEMPC8P8/AwMLAwNQBAXoAgB2BASUeJxjYWBgYKEK/v+fODHKMQC99QSxAAAAAAAAAACIAQIBYAG6AgwCUgKYAsADGgNcA6ID2AQOBC4EagT8BVQF6AY4BroHDgc+B4YHxAfkCGYJFAloCZgJ+gpUCoAK6AtcC4oLugwKDFoMqgzIDOQNAg1SDXB4nGNgZGBg0GUoZRBiAAEmIOYCQgaG/2A+AwAaFAHLAHichZE9bsJAEIWfwZAElChKpDRpVikoEsn8lEipUKCnoAez5ke211ovSNQ5TY6QE+QI6Whzikh52EMDRbza2W/evpkdyQDusIeH8rvnLtnDJbOSK7jAo3CV+pOwT34WrqGJnnCd+qtwAy94E26yY8YOnn/FrIV3YQ+3+BCu4AafwlXqX8I++Vu4hgf8CNep/wo3MPGuhZtoeeHA6qnTczXbqVVo0sik7niO9WITT+2pPNE2X5lUdYPOURrpVNtjm3y76DkXqciaRA15q+PYqMyatQ5dsHQu67fbkehBaBIMYKExhWOcQ2GGHeMKIQxSREV0Z/mY7gU2iFlp/3VP6LbIqR9yhS4CdM5cI7rSwnk6TY4tX+tRdXQrbsuahDSUWs1JYrLiDzzcramE1AMsi6oMfbS5ohN/UMyQ/AHYk29XeJxtkFtX1TAQhbs5bU9PWzgoihcQFbyhxAU/KauZtFmkSU0aiv+e3ly+ME97Zn1z2RMdREvk0fPBcIANYiRIsUWGHXIUKHGII+xxjBd4iRO8wmuc4g3e4h3e4wzn+IALfMQnfMYlrvAFX/EN3/ED1/iJX7gBw+9o/yeQ75U1rFKu0hR7LmnbqordSlk4qqwTzPe2i/3AuyPOfMMdCV85IlN2jTXEGm7q0OVLzTe2T5e+eBxzl87M3V4GrReC0aPq8/95JuxgtOUiq7gmI7jbdEImquU17R4UDax2SqSeuKuaZB5XdDr49eLkQQmy5QJyrcn9jUmofjs41StT58GTG0fY0M2+rJTxoKSKpdKU6en2cVE8UVtB/n70uhm5tOItOb5ryQQmrRbFrIKZ9C506/bSqbrp16TQJP/p0Yyjno1/WcRksljk3FJMhZVdkak7ip4AIVyVEAA=') format('woff');
}
第二步:定义使用 iconfont 的样式
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
第三步:挑选相应图标并获取字体编码,应用于页面
<span class="iconfont">3</span>
"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。