Bootstrap - Icon link

This chapter discusses about icon links, through which you can stylize the hyperlinks and other icons.

In Bootstrap, an icon link is a link that is accompanied by an icon. The icon can be positioned either before or after the link text, and it is typically used to provide additional context or visual cues to the user.

Icon links can be useful for adding visual interest and interactivity to your website or application, and they can be used in a variety of contexts such as navigation menus, buttons, or calls to action. The default link styles are modified by the icon link helper classes. They automatically align any pairing of icon and text and thus enhance their appearance on the page.

Bootstrap icons along with any icon or image can be used in the icon links.

  • Icons that are added only with the purpose of decoration, should be hidden from assistive technologies using aria-hidden="true".

  • Icons that are added with purpose of conveying some meaning or information, provide an appropriate text alternative by adding role="img" along with appropriate aria-label.

Example

  • To a regular <a> element, add .icon-link

  • Insert an icon on either side of the link text.

  • The .icon-link class will automatically size, place and color the icon.

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
    <title>Bootstrap - Icon Link</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
	    <link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
        <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
        <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
        <link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json">
        <link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
        <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico">
        <link rel="canonical" href="https://icons.getbootstrap.com/icons/search/"><script src="/assets/js/color-modes.js"></script>
	    <link rel="stylesheet" href="/assets/font/bootstrap-icons.min.css"><link rel="stylesheet" href="/assets/css/docs.css">
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top text-bg-light" role="navigation">
            <div class="container">
                <div class="navbar-header">
                <h1 class="logo">
                    <a title="tutorialspoint">
                        <img alt="tutorialspoint" src="http://www.tutorialspoint.com/green/images/logo.png"
                            style="height: auto; width: auto; display: inline-block; top: 0px;">
                    </a>
                </h1>
                </div>
            </div>
        </nav>
        <div class="container mt-2">
            <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                <symbol id="box-seam" viewBox="0 0 16 16">
				    <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"></path>
			    </symbol>
            </svg>
            <div class="feature col">
                <h3 class="fs-2 text-danger">Icon link example</h3>
                <p>Icon link feature of Bootstrap allows a user to add an icon along with an hyperlink and even the icon works as a link.</p>
                <a class="icon-link" href="#">
			    	<svg class="bi" aria-hidden="true">
                        <use xlink:href="#box-seam"></use></svg>
				    	Box Icon with text link
                </a>
			</div>
	</body>
</html>

Let us see another example where icon is placed after the text in an icon link:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Icon Link</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    	<link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
        <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
        <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
        <link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json">
        <link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
        <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico">
        <link rel="canonical" href="https://icons.getbootstrap.com/icons/search/"><script src="/assets/js/color-modes.js"></script>
	    <link rel="stylesheet" href="/assets/font/bootstrap-icons.min.css"><link rel="stylesheet" href="/assets/css/docs.css">
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top text-bg-light" role="navigation">
            <div class="container">
                <div class="navbar-header">
                <h1 class="logo">
                    <a title="tutorialspoint">
                        <img alt="tutorialspoint" src="http://www.tutorialspoint.com/green/images/logo.png"
                            style="height: auto; width: auto; display: inline-block; top: 0px;">
                    </a>
                </h1>
                </div>
            </div>
        </nav>
        <div class="container mt-2">
            <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                <symbol id="airplane-fill" viewBox="0 0 16 16">
				    <path d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Z"></path>
			    </symbol>
            </svg>
            <div class="feature col">
                <h3 class="fs-2 text-success">Icon link example</h3>
                <p>Icon link feature of Bootstrap allows a user to add an icon along with an hyperlink and even the icon works as a link. Here the icon is placed after the text in the icon link.</p>
                <a class="icon-link" href="#">Icon after the text
			    	<svg class="bi" aria-hidden="true">
                        <use xlink:href="#airplane-fill"></use>
                    </svg>
                </a>
			</div>
	</body>
</html>

Style on hover

In order to move the icon in an icon link to right, add the utility class .icon-link-hover to the class .icon-link.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Icon Link</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
	    <link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
        <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
        <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
        <link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json">
        <link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
        <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico">
        <link rel="canonical" href="https://icons.getbootstrap.com/icons/search/"><script src="/assets/js/color-modes.js"></script>
	    <link rel="stylesheet" href="/assets/font/bootstrap-icons.min.css"><link rel="stylesheet" href="/assets/css/docs.css">
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top text-bg-light" role="navigation">
            <div class="container">
                <div class="navbar-header">
                <h1 class="logo">
                    <a title="tutorialspoint">
                        <img alt="tutorialspoint" src="http://www.tutorialspoint.com/green/images/logo.png"
                            style="height: auto; width: auto; display: inline-block; top: 0px;">
                    </a>
                </h1>
                </div>
            </div>
        </nav>
        <div class="container mt-2">
        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
            <symbol id="chevron-right" viewBox="0 0 16 16">
				<path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
			</symbol>
        </svg>
        </div>
        <div class="feature col">
            <h3 class="fs-2 text-success">Icon link example - hover</h3>
            <p>Icon link feature of Bootstrap allows a user to add an icon along with an hyperlink and even the icon works as a link. Here the icon moves to the right on hovering.</p>
                <a class="icon-link icon-link-hover" href="#"><strong>Icon link hover</strong>
			    	<svg class="bi" aria-hidden="true">
                    <use xlink:href="#chevron-right"></use>
                    </svg>
                </a>
		</div>
	</body>
</html>

Utilities

In order to modify the underline color and offset of the icon link, use the custom link utilities provided by Bootstrap.

  • To add color to the iconlink, use the class link-* (where * can be any color-modes like danger, success, warning, info, etc.)

  • To add color to the line under the iconlink, use the class link-underline-* where * can be any color-modes like danger, success, warning, info, etc.)

  • To add opacity to the line under the iconlink, use the class link-underline-opacity-* (where * can be the percentage number such as 50, 55, 75, etc.)

Let us see an example of modifying the icon link using the predefined utilities:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Icon Link</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
        <link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
        <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
        <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
        <link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json">
        <link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
        <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico">
        <link rel="canonical" href="https://icons.getbootstrap.com/icons/search/"><script src="/assets/js/color-modes.js"></script>
        <link rel="stylesheet" href="/assets/font/bootstrap-icons.min.css"><link rel="stylesheet" href="/assets/css/docs.css">
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top text-bg-light" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <h1 class="logo">
                        <a title="tutorialspoint">
                            <img alt="tutorialspoint" src="http://www.tutorialspoint.com/green/images/logo.png"
                                style="height: auto; width: auto; display: inline-block; top: 0px;">
                        </a>
                    </h1>
                </div>
            </div>
        </nav>
        <div class="container mt-2">
            <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                <symbol id="airplane-fill" viewBox="0 0 16 16">
                    <path d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Z"></path>
                </symbol>
            </svg>
            <div class="feature col">
                <h3 class="fs-2 text-success">Icon link customization</h3>
                <p>Icon link feature of Bootstrap allows a user to add an icon along with an hyperlink and even the icon works as a link. Here the appearance of icon link is modified using the link utility classes.</p>
                    <a class="icon-link icon-link-hover link-danger link-underline-success link-underline-opacity-55" href="#"><strong>Icon link utility</strong>
                        <svg class="bi" aria-hidden="true">
                        <use xlink:href="#airplane-fill"></use>
                        </svg>
                    </a>
                </div>
        </div>
    </body>
</html>
Advertisements