• question-circle
    
  • safe
    
  • mic-0ff
    
  • record-stop
    
  • swap
    
  • shared screen
    
  • phone-hangup
    
  • screenshot
    
  • record
    
  • mic
    
  • phone
    
  • fullscreen-exit
    
  • fullscreen
    
  • download
    
  • calendar
    
  • pdf
    
  • image
    
  • view-grid
    
  • search
    
  • phone
    
  • plus-circle
    
  • video
    
  • view-gallery
    
  • edit
    
  • writing
    
  • user-group
    
  • mic-off
    
  • wifi
    
  • file
    
  • language
    
  • user
    
  • desktop
    
  • mic
    
  • camera
    
  • menu-fold
    
  • menu-unfold
    
  • up-circle
    
  • right-circle
    
  • left-circle
    
  • caret-up
    
  • caret-down
    
  • caret-right
    
  • down-circle
    
  • caret-left
    

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">&#x33;</span>

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

  • question-circle
    .icon-question-circle
  • safe
    .icon-safe
  • mic-0ff
    .icon-mic-0ff
  • record-stop
    .icon-record-stop
  • swap
    .icon-swap
  • shared screen
    .icon-a-sharedscreen
  • phone-hangup
    .icon-phone-hangup
  • screenshot
    .icon-screenshot
  • record
    .icon-record
  • mic
    .icon-mic1
  • phone
    .icon-phone1
  • fullscreen-exit
    .icon-fullscreen-exit
  • fullscreen
    .icon-fullscreen
  • download
    .icon-download
  • calendar
    .icon-calendar
  • pdf
    .icon-pdf
  • image
    .icon-image
  • view-grid
    .icon-view-grid
  • search
    .icon-search
  • phone
    .icon-phone
  • plus-circle
    .icon-plus-circle
  • video
    .icon-video
  • view-gallery
    .icon-view-gallery
  • edit
    .icon-edit
  • writing
    .icon-writing
  • user-group
    .icon-user-group
  • mic-off
    .icon-mic-off
  • wifi
    .icon-wifi
  • file
    .icon-file
  • language
    .icon-language
  • user
    .icon-user
  • desktop
    .icon-desktop
  • mic
    .icon-mic
  • camera
    .icon-camera
  • menu-fold
    .icon-menu-fold
  • menu-unfold
    .icon-menu-unfold
  • up-circle
    .icon-up-circle
  • right-circle
    .icon-right-circle
  • left-circle
    .icon-left-circle
  • caret-up
    .icon-caret-up
  • caret-down
    .icon-caret-down
  • caret-right
    .icon-caret-right
  • down-circle
    .icon-down-circle
  • caret-left
    .icon-caret-left

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"。

  • question-circle
    #icon-question-circle
  • safe
    #icon-safe
  • mic-0ff
    #icon-mic-0ff
  • record-stop
    #icon-record-stop
  • swap
    #icon-swap
  • shared screen
    #icon-a-sharedscreen
  • phone-hangup
    #icon-phone-hangup
  • screenshot
    #icon-screenshot
  • record
    #icon-record
  • mic
    #icon-mic1
  • phone
    #icon-phone1
  • fullscreen-exit
    #icon-fullscreen-exit
  • fullscreen
    #icon-fullscreen
  • download
    #icon-download
  • calendar
    #icon-calendar
  • pdf
    #icon-pdf
  • image
    #icon-image
  • view-grid
    #icon-view-grid
  • search
    #icon-search
  • phone
    #icon-phone
  • plus-circle
    #icon-plus-circle
  • video
    #icon-video
  • view-gallery
    #icon-view-gallery
  • edit
    #icon-edit
  • writing
    #icon-writing
  • user-group
    #icon-user-group
  • mic-off
    #icon-mic-off
  • wifi
    #icon-wifi
  • file
    #icon-file
  • language
    #icon-language
  • user
    #icon-user
  • desktop
    #icon-desktop
  • mic
    #icon-mic
  • camera
    #icon-camera
  • menu-fold
    #icon-menu-fold
  • menu-unfold
    #icon-menu-unfold
  • up-circle
    #icon-up-circle
  • right-circle
    #icon-right-circle
  • left-circle
    #icon-left-circle
  • caret-up
    #icon-caret-up
  • caret-down
    #icon-caret-down
  • caret-right
    #icon-caret-right
  • down-circle
    #icon-down-circle
  • caret-left
    #icon-caret-left

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>