在本文中，我們將討論如何在 HTML 中設定圖示的大小。
圖示是代表網頁上特定動作的符號。 圖示字體包含符號和字形。有幾個圖示庫（字體）提供圖示並可以在 HTML 網頁上使用。
網頁開發人員經常使用的突出圖示字體是Font Awesome、Bootstrap Glyphicons 和Google 的材質圖示我>#.
Font Awesome - 此函式庫完全免費，可供商業和個人使用。該字體為我們提供了 519 個免費可縮放向量圖示。這些可以輕鬆定制，最初是由 Bootstrap 開發的。
Bootstrap Glyphicons - 這是一個單色圖示庫，可用於光柵圖像格式、向量圖像格式和字體。它提供了超過 250 個字體格式的字形。您可以在網頁專案中使用這些字體，但它們不是免費的。
Google 的材料圖標 - 谷歌作為一組提供的「材料設計指南」下設計了 750 個圖標，這些圖標被稱為材料設計圖標。幾乎所有網頁瀏覽器都支援這些圖示。要使用這些圖標，您必須載入字體（庫）材質圖標。
讓我們在下面的範例中使用上述圖示字體庫。
在下面的範例中，
首先，我們載入了 Font Awesome 函式庫。
然後我們使用其中一個圖標，並將該圖標類別的名稱添加到
標記內的 HTML 元素中。然後，我們透過使用 CSS 定義圖示大小並將其與類別名稱一起使用來增加圖示的大小。
我們已將尺寸宣告為 100px。
<html>
<head>
<title>Set the size of the icons in HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.size {
font-size: 100px;
}
</style>
</head>
<body>
<h2>This is a Font Awesome Icon</h2>
<p>We have set the size of this icon to 100px.</p>
<i class="fa fa-inr size"></i>
</body>
</html>
正如我們在輸出中看到的，我們使用了印度貨幣的圖標，並使用 CSS 定義了其大小。
在下面的範例中，
我們已載入材質圖示庫。
然後我們使用其中一個圖標，並將該圖標類別的名稱添加到
標記內的 HTML 元素中。我們使用了名為traffic的圖標，因為它屬於操作類別。
然後，我們透過使用 CSS 定義圖示大小並將其與類別名稱一起使用來增加圖示的大小。
<!DOCTYPE html>
<html>
<head>
<title>Set the size of the icons in HTML</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
i.size {
font-size: 150px;
}
</style>
</head>
<body>
<h2>This is a Google Material Icon</h2>
<p>We have set the size of this icon to 150px.</p>
<i class="material-icons size">traffic</i>
</body>
</html>
正如我們在輸出中看到的，我們使用了交通燈圖示並使用 CSS 定義了其大小。
在下面的範例中，
首先，我們載入了 Bootstrap Glyphicons 函式庫。
然後我們使用其中一個圖標，並將該圖標類別的名稱添加到
標記內的 HTML 元素中。在範例中，我們使用了名為 tree 的圖標，其類別名稱為 tree-decidious。
<!DOCTYPE html>
<html>
<head>
<title>Set the size of the icons in HTML</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
i.mysize {
font-size: 100px;
}
</style>
</head>
<body>
<h2>This is a Bootstrap Glyphicons Icon</h2>
<p>We have set the size of this icon to 100px.</p>
<i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>
如我們在輸出中看到的，我們使用了樹的圖示並使用 CSS 定義了它的大小。
以上是設定HTML中圖示的大小的詳細內容。更多資訊請關注PHP中文網其他相關文章！
