【CSS】Fontawesome

在網頁中插入icon圖示

 發表於 2022-04-09  |  1 分鐘  |  133 個字

【CSS】Fontawesome

在網頁中插入icon圖示

 發表於 2022-04-09  |  1 分鐘  |  133 個字

Font Awesome 5

  1. 將<head>加入<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

  1. 使用font awesome 5搜尋icon

1
2
3
4

<i class="fas fa-camera"></i>
<i class="fas fa-camera fa-xs"></i><!--小型-->
<i class="fas fa-camera fa-sm"></i><!--中型-->
<i class="fas fa-camera fa-lg"></i><!--大型-->

Font Awesome 6

  1. 將<head>加入<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  1. 使用font awesome 6搜尋icon

1
2
3
4
5
6

<i class="fa-solid fa-camera"></i>
<i class="fa-solid fa-camera fa-2xs"></i><!--超小型-->
<i class="fa-solid fa-camera fa-sm"></i><!--小型-->
<i class="fa-solid fa-camera fa-lg"></i><!--中型-->
<i class="fa-solid fa-camera fa-xl"></i><!--大型-->
<i class="fa-solid fa-camera fa-2xl"></i><!--超大型-->

加入在偽元素中

1
2
3
4
5
6

.box::before{
    content: "\f0e0"; /*圖樣編號*/
    font-family: "Font Awesome 5 Free";
    font-size: 24px; /*調整大小*/
    font-weight: 900; /*調整實心或空心*/
}

  • 調整為元素位置

1
2
3
4
5
6

 .box{
    position: relative;
}
.box::before{
    position: absolute;
}

  • 讓content內的文字換行

1
2
3
4
5

.box::before{
    display: inline/inline-block;
    content: "第一行文字\A第二行文字";
    white-space: pre-wrap;
}

動態加入fontawesome

1
2

<a href="image/pic.jpg">圖片檔</a>
<a href="image/file.doc">文件檔</a>


1
2

$("a[href$='.jpg']").addClass("fa fa-file-photo-o");//在a標籤的href裡如果找到.jpg關鍵字就執行
$("a[href$='.doc']").addClass("fa fa-file-word-o");//在a標籤的href裡如果找到.doc關鍵字就執行

先到html引入fontawesome cdn

css 

其他相關