資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究在 HTML 中設定圖示大小
在本文中，我們將討論如何在 HTML 中設定圖示的大小。
圖示是表示網頁上特定操作的符號。圖示字型包含符號和字形。有幾個圖示庫（字型）提供圖示，可用於 HTML 網頁。
網頁開發人員經常使用的一些主要的圖示字型是Font Awesome、Bootstrap Glyphicons和Google 的 Material Icons。
Font Awesome - 這個庫完全免費，可用於商業和個人用途。此字型為我們提供了 519 個免費的可縮放向量圖示。這些圖示可以輕鬆自定義，最初由 Bootstrap 開發。
Bootstrap Glyphicons - 這是一個單色圖示庫，提供光柵影像格式、向量影像格式和字型格式。它以字型格式提供超過 250 個字形。您可以在 Web 專案中使用這些字型，但它們不是免費的。
Google 的 Material Icons - 750 個根據“Material Design 指南”設計的圖示，Google 提供為一組，稱為 Material Design 圖示。這些圖示幾乎在所有 Web 瀏覽器中都受支援。要使用這些圖示，您必須載入字型（庫）material-icons。
讓我們在下面的示例中使用上面提到的圖示字型庫。
Font Awesome 圖示
示例
在下面的示例中，
首先，我們載入了Font Awesome庫。
然後我們使用其中一個圖示，並將該圖示類的名稱新增到 <body> 標籤內的 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 Material Icons
示例
在下面的示例中，
我們已載入了 Material Icons 庫。
然後我們使用其中一個圖示，並將該圖示類的名稱新增到 <body> 標籤內的 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
示例
在下面的示例中，
首先，我們載入了 Bootstrap Glyphicons 庫。
然後我們使用其中一個圖示，並將該圖示類的名稱新增到 <body> 標籤內的 HTML 元素中。
在示例中，我們使用了名為tree的圖示，其類名為tree-deciduous。
<!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 定義了其大小。
6K+ 閱讀量
