关于网页图标的引用--bootstrap4和ElementUI

话不多说，先上代码

    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/icon.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.css"> -->
    <link rel="stylesheet" href="https://unpkg.com/open-iconic@1.1.1/font/css/open-iconic-bootstrap.css">

目前我就只使用这两个图标库，bootstrap4的图标是自己独立出来的，开源的，之前bootstrap3是别人给的，现在如果你使用bootstrap4，那么之前的3图标库名称就不能用了

要使用open-iconic，4的图标库放在上面了，现在还在完善，你要是只用图标就只需要引用，其他样式库不用引用

<link rel="stylesheet" href="https://unpkg.com/open-iconic@1.1.1/font/css/open-iconic-bootstrap.css">

使用方式：oi oi-iconname

当然你还可以用css方式引用，作为背景

background-image: url('data:image/svg+xml,这里写bootstrap4给的图标样例');

bootstrap4图标默认颜色为黑色，如果你要改变颜色，只要更改图标样例中的fill属性，就可以更换颜色

//样例模板
<svg class="bi bi-phone" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M11 1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
      <path fill-rule="evenodd" d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</svg>

还用一个就是element-ui

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/icon.css">

使用方式：el-icon-iconname