關於網頁圖標的引用--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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM