How to Style Icons Bold in Bootstrap ?
Last Updated :
29 Feb, 2024
An icon is a visual representation that helps to understand the website & also helps to navigate through the website. To create a bold icon in CSS, we use font-weight as bold but in Bootstrap this syntax doesn’t work. We will learn how to style icons bold in bootstrap in this article.
Using CSS classes
In this approach, we will use css classes to bold an icon. Font size is set to fs-1, to make the icon clearly visible. -webkit-text-stroke is used to bold the icons as fw-bold doesn’t work in Bootstrap 5.
Example 1: In this example, we will make an icon bold in Bootstrap using in-built classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Icons</title>
<script src=
integrity=
"sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
integrity=
"sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98=" crossorigin="anonymous">
<link rel="stylesheet" href=
<style>
[class*="col"],
h2,
p {
padding: 1rem;
background-color: green;
border: 2px dashed #f3f3f3;
color: #fff;
}
i {
-webkit-text-stroke: 2px;
}
</style>
</head>
<body>
<div class="container text-center fs-1">
<p>Style Bootstrap Icons </p>
<div class="row">
<div class="col-lg">
<i class="bi bi-info-square"></i>
</div>
<div class="col-sm">
<i class="bi fs-1 bi-bookmark-heart"></i>
</div>
<div class="col-sm">
<i class="bi fs-1 bi-bing"></i>
</div>
<div class="col-lg"><i class="bi fs-1 bi-at"></i>
</div>
<div class="col-sm">
<i class="bi fs-1 bi-star"></i>
GeeksforGeeks
<i class="bi fs-1 bi-star"></i>
</div>
</div>
</div>
</body>
</html>
|
Output:
Style Icon Bold in Bootstrap 5
Example 2: Style the Icon to bold with hover effect in Bootstrap 5.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Bootstrap Icons</title>
<script src=
integrity=
"sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
integrity=
"sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98="
crossorigin="anonymous">
<link rel="stylesheet" href=
<style>
[class*="col"],
h2,
p {
padding: 1rem;
background-color: green;
border: 2px dashed #f3f3f3;
color: #fff;
}
i:hover {
-webkit-text-stroke: 2px ;
}
</style>
</head>
<body>
<div class="container text-center fs-1">
<p>Style Bootstrap Icons </p>
<div class="row">
<div class="col-lg">
<i class="bi bi-info-square"></i>
</div>
<div class="col-sm">
<i class="bi fs-1 bi-bookmark-heart"></i>
</div>
<div class="col-sm">
<i class="bi fs-1 bi-bing"></i>
</div>
<div class="col-lg"><i class="bi fs-1 bi-at"></i>
</div>
<div class="col-sm"><i class="bi fs-1 bi-star"></i>
GeeksforGeeks
<i class="bi fs-1 bi-star"></i>
</div>
</div>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...