使用Font Awesome替換你的網站圖示(icons 圖示)
阿新 • • 發佈：2021-06-03
第一次使用 Font Awesome 發現相當的爽呀！它的圖示很全，能夠幫你節約時間去找圖片。下面就來一起學習吧：
1： 去官方網站下載解壓http://fontawesome.io/
2： 解壓後拷貝到你的專案中再引入到你的檔案裡面 如下：
<linkrel="stylesheet"type="text/css"href="font-awesome-4.0.3/css/font-awesome.css"/>3： 開始使用：
<ahref="#"class="fafa-trash-ofa-1g"></a> 注意：fa 是全域性必須加入。
fa-trash-0 是你需要的圖示類（相當於名字）參考地址: http://fontawesome.io/icons/。
fa-1g 控制大小用的 還有（fa-2x ，fa-3x，fa-4x，fa-5x）。
效果：
程式碼：
<!DOCTYPEhtml>
<html>
<head>
<title>fonticonstest</title>
<metacharset="ut-8"/>
<linkrel="stylesheet"type="text/css"href="font-awesome-4.0.3/css/font-awesome.css"/>
<styletype="text/css">
.danger{
display:inline-block;
width:80px;
height:30px;
text-align:center;
background:brown;
border-radius:5px;
font-size:14px;
line-height:30px;
text-decoration:none;
color:white;
}
</style>
</head>
<body>
<!--用法一-->
<aclass="danger"href="#"><iclass="fafa-trash-ofa-lg"></i>Delete</a>
<!--用法二-->
<iclass="fafa-trash-ofa-2x"></i>Delete
<iclass="fafa-trash-ofa-3x"></i>Delete
<iclass="fafa-trash-ofa-4x"></i>Delete
<!--用法三-->
<ahref="#"class="fafa-trash-ofa-5x"></a>
</body>
</html> 轉載於:https://my.oschina.net/leipeng/blog/210480