資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在HTML中為按鈕新增圖示？
引言
在本文中，我們將向您展示如何在HTML中為按鈕新增圖示。圖示是增加視覺吸引力並增強按鈕可用性的好方法。它們可以用來指示按鈕將執行的操作型別，或者使使用者更容易理解按鈕的功能。
方法
在HTML中為按鈕新增圖示的方法有很多，本文將介紹兩種最常用的方法：
使用字型庫
使用影像檔案。
方法1：使用字型庫
在HTML中為按鈕新增圖示的一種方法是使用字型庫。字型庫是可縮放向量圖示的集合，可以使用CSS輕鬆自定義和設定樣式。最流行的字型庫是Font Awesome和Ionicons。
步驟1 - 在HTML檔案中包含字型庫的CSS檔案。
示例
以下是一個演示示例：
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/5.15.3/css/all.min.css">
<style>
button {
padding: 10px;
font-size: 1em;
}
</style>
</head>
步驟2 - 使用您想要使用的圖示的相應類。例如，在Font Awesome中，您將使用類“fa fa-icon-name”來新增圖示。
這裡，我們添加了右箭頭圖示：
<i class="fa fa-arrow-right"></i>
步驟3 - 將類新增到按鈕的HTML程式碼中。
<button> <i class="fa fa-arrow-right"></i> Next </button>
步驟4 - 完整的程式碼如下所示（index.html檔案）：
示例
以下是一個演示示例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/5.15.3/css/all.min.css">
<style>
button {
padding: 10px;
font-size: 1em;
}
</style>
</head>
<body>
<h1> Welcome to tutorials point</h1>
<button>
<i class="fa fa-arrow-right"></i> Next
</button>
</body>
</html>
以上程式碼使用Font Awesome庫向按鈕新增圖示。第一步是在HTML檔案中包含字型庫的CSS檔案。在本例中，我們使用Font Awesome的CDN連結。接下來，我們使用我們想要使用的圖示的相應類，在本例中是右箭頭圖示的“fa fa-arrow-right”。然後，我們將此類新增到我們按鈕的HTML程式碼中，該程式碼包裝在<i>標籤內。這將在按鈕內顯示右箭頭圖示。
方法2：使用影像檔案
在HTML中為按鈕新增圖示的另一種方法是使用影像檔案。如果您想使用自定義圖示或您想要使用的圖示在字型庫中不可用，則此方法很有用。
示例
以下是一個演示示例：
步驟1 - 建立或下載您想要使用的圖示的影像檔案。
這裡，我們使用免費圖示網站下載圖示。
步驟2 - 透過導航和拖放檔案資源管理器，將影像檔案新增到專案的目錄中。
步驟3 - 新增您想要新增圖示的html按鈕元素。
<button class="icon-button"> Next </button>
步驟4 - 在按鈕的CSS中使用“background-image”屬性將圖示設定為背景影像。
.icon-button {
background-image: url(icon.png);
}
步驟5 - 新增適當的CSS來定位和調整圖示的大小。
.icon-button {
background-image: url(icon.png);
background-repeat: no-repeat;
background-position: center;
}
步驟6 - 以下是實現此功能的完整程式碼：
示例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/5.15.3/css/all.min.css">
<style>
.icon-button {
background-image: url(icon.png);
background-repeat: no-repeat;
background-position: center;
padding: 12px;
}
</style>
</head>
<body>
<h1>Welcome to Tutorials Point</h1>
<button class="icon-button">
<i class="fa fa-arrow-right"></i> Next
</button>
<button class="icon-button">
Next
</button>
</body>
</html>
在此示例中，第一個按鈕使用Font Awesome庫顯示箭頭圖示，第二個按鈕使用影像檔案作為圖示。您可以使用CSS屬性（例如background-size和background-position）調整圖示的大小和位置。
結論
在本文中，我們向您展示了兩種在HTML中為按鈕新增圖示的不同方法。使用字型庫是為按鈕新增圖示的快速簡便的方法，並提供各種選擇。另一方面，使用影像檔案為您提供了更大的靈活性，並允許您使用自定義圖示或字型庫中沒有的圖示。無論您選擇哪種方法，為按鈕新增圖示都可以極大地增強網頁的視覺吸引力和可用性。
15K+ 次瀏覽
