Home > Article > Web Front-end > Set the size of icons in HTML
Set the size of icons in HTML
- 王林forward
- 2023-09-03 11:29:061764browse
In this article, we will discuss how to set the size of icons in HTML.
Icons are symbols that represent specific operations on a web page. Icon Font Contains symbols and glyphs. There are several icon libraries (fonts) that provide icons and can be used on HTML web pages.
Prominent icon fonts often used by web developers are Font Awesome, Bootstrap Glyphicons and Google’s Material Icons我>.
Font Awesome - This library is completely free for commercial and personal use. This font gives us 519 free scalable vector icons. These can be easily customized and were originally developed with Bootstrap.
Bootstrap Glyphicons - This is a monochrome icon library available for raster image formats, vector image formats and fonts. It provides over 250 glyphs in font formats. You can use these fonts in web projects, but they are not free.
Material Icons for Google - Google has designed 750 icons under the "Material Design Guidelines" provided as a set, these icons are called Material Design Icons. Almost all web browsers support these icons. To use these icons, you must load the font (library) material icon.
Let’s use the above icon font library in the example below.
Font Awesome Icons
Example
In the example below,
First, we loaded the Font Awesome library.
-
Then we take one of the icons and add the name of that icon class to the HTML element inside the
tag. We then increase the size of the icon by defining it using CSS and using it with the class name.
We have declared the size as 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>
As we can see in the output, we have used the icon of the Indian currency and defined its size using CSS.
Google Material Icon
Example
In the example below,
We have loaded the material icon library.
-
Then we take one of the icons and add the name of that icon class to the HTML element inside the
tag. We used the icon named traffic because it belongs to the action category.
We then increase the size of the icon by defining it using CSS and using it with the class name.
<!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>
As we can see in the output, we used a traffic light icon and defined its size using CSS.
Guide glyph
Example
In the example below,
First, we loaded the Bootstrap Glyphicons library.
-
Then we take one of the icons and add the name of that icon class to the HTML element inside the
tag. In the example we are using an icon named tree with the class name 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>
As we can see in the output, we used the icon of the tree and defined its size using CSS.
The above is the detailed content of Set the size of icons in HTML. For more information, please follow other related articles on the PHP Chinese website!