In the development phase of a site, the developers often prioritize incorporating responsive icons, such that these become clearly visible regardless of the screen size. This feature engages the user and the overall layout of the web page or the site.
This article discussed the below-given content aspects:
What are Responsive Icons?
The responsive icons correspond to the icons that react, and transition based on the screen size. It is such that each icon has a minimum of 2 variations with varying details.
How to Create Responsive Icons?
The responsive icons can be created by importing them and styling them to an appropriate width.
Example 1: Creating Responsive Icons
This example imports an icon via the specified path and styles it such that it becomes responsive i.e., adjusts its size accordingly.
HTML Code
Overview the below-given code lines:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div class="respcon">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/responsiveicon_1.svg" alt="responsive icon" />
</div>
</body>
</html>
In this code, import a responsive icon from the specified path using the “src” attribute.
CSS Code
Now, go through the below block of code:
.respcon {
width: 80%;
margin:1em auto;
}
</style>
In this code, adjust the width and margin of the responsive icon, respectively such that it transitions/adjusts its size and visibility in accordance with the screen size.
Output
From this output, it can be verified that the icon becomes responsive upon changing the screen’s size accordingly.
Example 2: Creating a Responsive Navigation Bar With Icons
This demonstration creates a responsive navigation bar comprising the icons.
HTML Code
Firstly, consider the below-given block of code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="respnav">
<a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="#"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
<a href="#"><i class="fa fa-fw fa-user"></i> About</a>
</div>
</body>
</html>
In this code, perform the below-stated steps:
- Include the given lines of code within the “<head>” element to use the Font Awesome icons.
- These “Font Awesome” icons are usually utilized with inline elements, such as “<i>” and “<span>” to append the responsive icons, demonstrated in the code.
- These icons are contained in the “<a>” tag.
- The first “<a>” tag is allocated as “active” and will be opened by default.
CSS Code
Now, move on to the CSS code:
.respnav {
width: 100%;
background-color: #555;
overflow: auto;
}
.respnav a {
float: left;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.respnav a:hover {
background-color: #6495ED;
}
.active {
background-color: #CD5C5C;
}
@media screen and (max-width: 500px) {
.respnav a {
float: none;
display: block;
}}
</style>
Here, style the navigation bar’s background color, the icon text’s size, decoration, and the color of the active icon and the hovered icons using the relevant properties.
Output
Conclusion
The responsive icons correspond to the icons that react, and transition based on the screen size. These icons are created by importing them and adjusting their size such that they adjust in accordance with the window. Also, these icons can be contained in a navigation bar. This write-up described creating responsive icons.
