首頁 > 文章 > web前端 > 設定HTML中圖示的大小

設定HTML中圖示的大小

王林轉載: 2023-09-03 11:29:061734瀏覽

設定HTML中圖示的大小

在本文中，我們將討論如何在 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 定義了其大小。

Google 材質圖示

範例

在下面的範例中，

我們已載入材質圖示庫。
然後我們使用其中一個圖標，並將該圖標類別的名稱添加到
標記內的 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中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇："HTML5 canvas ctx.fillText無法實作換行"下一篇："HTML5 canvas ctx.fillText無法實作換行"

看更多