iconfont的使用

时间 2021-04-10 标签 css html 前端 web chrome 浏览器 app svg 性能字体

iconfont使用

1 单个icon使用

直接下载png、svg、ai等放在html中使用css

svg

能够经过fill控制颜色
经过width和height控制大小和形状html

应用场景

这种状况适合用在图标引用少、之后也不须要特别维护的场景
好比设计师用来坐demo原型，前端临时作个活动页面前端

<svg t="1595044344437" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"

        p-id="1950" width="50" height="50">
        <path
            d="M621.226667 764.586667c-27.306667 10.24-47.786667 17.066667-64.853334 20.48s-34.133333 6.826667-58.026666 6.826666c-34.133333 0-58.026667-6.826667-78.506667-20.48-17.066667-13.653333-27.306667-30.72-27.306667-51.2 0-6.826667 0-17.066667 3.413334-23.893333 0-6.826667 3.413333-17.066667 6.826666-27.306667l34.133334-98.986666c3.413333-10.24 0-17.066667 3.413333-27.306667 3.413333-6.826667 3.413333-17.066667 3.413333-23.893333 0-13.653333 0-20.48-3.413333-27.306667-6.826667-6.826667-17.066667-3.413333-37.546667-3.413333-10.24 0-17.066667 0-27.306666 3.413333s-17.066667 0-23.893334 3.413333l10.24-30.72c23.893333-6.826667 44.373333-13.653333 64.853334-20.48 20.48-6.826667 40.96-6.826667 58.026666-6.826666 34.133333 0 58.026667 6.826667 75.093334 20.48s37.546667 30.72 37.546666 51.2c0 3.413333 0 13.653333-3.413333 23.893333 0 10.24-3.413333 20.48-6.826667 30.72l-44.373333 98.986667c-3.413333 6.826667-6.826667 17.066667-6.826667 27.306666-3.413333 10.24-3.413333 17.066667-3.413333 23.893334 0 13.653333 3.413333 23.893333 10.24 27.306666 6.826667 3.413333 20.48 6.826667 37.546667 6.826667 6.826667 0 17.066667 0 27.306666-3.413333s17.066667-3.413333 23.893334-6.826667l-10.24 27.306667zM607.573333 372.053333c-13.653333 10.24-34.133333 17.066667-54.613333 17.066667s-40.96-6.826667-54.613333-17.066667c-13.653333-10.24-23.893333-23.893333-23.893334-40.96s6.826667-30.72 23.893334-40.96c13.653333-10.24 34.133333-17.066667 54.613333-17.066666s40.96 6.826667 54.613333 17.066666c13.653333 10.24 23.893333 23.893333 23.893334 40.96s-10.24 30.72-23.893334 40.96"
            fill="#666666" p-id="1951"></path>
        <path
            d="M512 1006.933333C238.933333 1006.933333 17.066667 785.066667 17.066667 512S238.933333 17.066667 512 17.066667 1006.933333 238.933333 1006.933333 512 785.066667 1006.933333 512 1006.933333z m0-955.733333C259.413333 51.2 51.2 259.413333 51.2 512S259.413333 972.8 512 972.8 972.8 764.586667 972.8 512 764.586667 51.2 512 51.2z"
            fill="#666666" p-id="1952"></path>
    </svg>

2 unicode引用

unicode是字体再网页端最原始的应用方式web

兼容性好，支持ie6+,以及全部现代浏览器
支持按字体的方式去动态调整图标大小，颜色等等
由于是字体，不支持多色，只能使用平台里单色的图标(缺点)

使用

下载项目，拷贝css，导入页面,添加上相应的class和文本内容便可chrome

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1595044553727'); /* IE9 */
  src: url('iconfont.eot?t=1595044553727#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANEAAsAAAAABzwAAAL4AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCTIImATYCJAMICwYABCAFhG0HKxtHBsiOk6UGkr/z+dftvS950AT4YtB6vroEKRJOSNVl08l9Mps60wABZub/uHf6R4nPB1Iuc0z+1AUYbw1ob4z2eUAFEoC3qFdfQzKYp4EA0GCiGKSkrKYFHChgEgFAbBbTILiUDxRUJTkQqEtWUpD1UIFjVjAPAKzzv09+ISkOYKBiAWUNKx1BwSmmsfPd89HjIuCPZwGg1gEsgBgABUhLqa0OG8ZisNBozBRBAAoa/ErdbtcAstY/D0QNKNQBAMZT3jnxbcGpFjIAAEo7zYClvV4E0DxfnU66HLL5sGblVf1JQhYYthnat23dRgwLtuq3akJWbt681X/ctfBtx7SrIrecADb7o6TF2QPzj4SuCt+2zdC1+fDKo0d36hfU77LqyJEd87f3vPra9vpb+8svrS8+z7QkLQEnyS54K9vCuYsvXvId0/nz0CSdOlTTHzik19WotRpdcAnn5M5/3l+4N/Lt56ceSYvuTffm1XqvvuihLq88Xt+9XssOHijS245dF67X39GNnct6jL1jWfiUGgz0KbJdjiOKIx7B125TkNxGPhfw8SgAAO4N7D9W+gG/waqc7Vf6vXL+c1oKAHifsemuP8a9gYKVAHCnaSfA6+a3rKC6EJTMgfOYnYE54QED0CINADfA5etTX1XAvVkIuBRfAYNRmAAsOISglBwDKmiRAmpwyAcNopWv18KPjAWhPIAoSwgQeDsHDDxxA1h4e4hS8kdQQe8PqOEdCxq05bejFmFZNMWyOKiII8LQDMEyLDmMllHRBMVNommKbVBOCn1Kmyi7LEEhMS4hmywXHaI8xhzXVFOSohgFoyzZhTJynmizSYJTliaLw0qcWVGcWfHxxrIrxQ1LdmhQTCYapBCNEAyZQWAxTOJgdGsrNLnPNxGZTGEzSK4h1FjbiGQulu4FieIktEDLZY5WhGu5xGUqkyQKhZHASCaxE5SRYSIbG4nAWT5sMtEwRRxzj4hTlnisZmwri5tfYX+6dQAagJohmMWCWAA=') format('woff2'),
  url('iconfont.woff?t=1595044553727') format('woff'),
  url('iconfont.ttf?t=1595044553727') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1595044553727#iconfont') format('svg'); /* iOS 4.1- */
}

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

.icon-i:before {
  content: "\e604";
}

<link rel="stylesheet" href="../lib/iconfont.css">
<body>
    <span class="iconfont">&#xe604;</span>
</body>

3 font-class引用

font-class是unicode的方式的变种
主要是解决unicode书写不直观，语意不明确的问题
与Unicode使用方式相比，具备如下特色浏览器

兼容性好，支持IE8+，以及全部现代浏览器
相比于Unicode语意明确，书写更直观
替换图标时，使用class定义图标，因此替换时只须要修改class里面的Unicode引用
本质上仍是使用的字体，因此多色图标是不支持的

<link rel="stylesheet" href="../lib/iconfont.css">
<body>
     <span class="iconfont icon-i"></span>
</body>

4 Symbol使用

这是一种全新的使用方式，应该说这才是将来的主流，也是平台目前推荐的用法。相关介绍能够参考这篇文章这种用法实际上是作了一个 SVG 的集合，与另外两种相比具备以下特色：app

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

<style>
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>
<script src="../lib/iconfont.js"></script>
<body>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-i"></use>
      </svg>
</body>