話不多說,先上代碼
<!-- <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