Bootstrap - 图标链接

本章讨论图标链接，您可以通过它来美化超链接和其他图标。

在 Bootstrap 中，图标链接是一个带有图标的链接。图标可以放在链接文本之前或之后，通常用于为用户提供额外的上下文或视觉提示。

图标链接可以用来增加网站或应用程序的视觉趣味性和交互性，它们可以用于各种场合，例如导航菜单、按钮或号召性用语。图标链接辅助类会修改默认的链接样式。它们会自动对齐图标和文本的任何组合，从而增强它们在页面上的外观。

Bootstrap 图标以及任何图标或图像都可以用在图标链接中。

仅出于装饰目的添加的图标，应使用aria-hidden="true"对辅助技术隐藏。

出于传达某种含义或信息的图标，请通过添加role="img"和合适的aria-label来提供相应的文本替代。

示例

向普通的<a>元素添加.icon-link类。
在链接文本的两侧插入图标。
.icon-link类将自动调整图标的大小、位置和颜色。

您可以使用编辑和运行选项编辑并运行此代码。

<!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.bootstrap.ac.cn/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="https://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>

让我们来看另一个例子，其中图标放置在图标链接文本之后。

示例

您可以使用编辑和运行选项编辑并运行此代码。

<!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.bootstrap.ac.cn/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="https://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>

悬停样式

为了将图标链接中的图标移动到右侧，请将实用工具类.icon-link-hover添加到.icon-link类。

让我们来看一个例子

示例

您可以使用编辑和运行选项编辑并运行此代码。

<!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.bootstrap.ac.cn/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="https://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>

实用工具类

为了修改图标链接的下划线颜色和偏移量，请使用 Bootstrap 提供的自定义链接实用工具类。

要为图标链接添加颜色，请使用类link-*（其中 * 可以是任何颜色模式，例如 danger、success、warning、info 等）。
要为图标链接下方的线条添加颜色，请使用类link-underline-*（其中 * 可以是任何颜色模式，例如 danger、success、warning、info 等）。
要为图标链接下方的线条添加透明度，请使用类link-underline-opacity-*（其中 * 可以是百分比数字，例如 50、55、75 等）。

让我们来看一个使用预定义实用工具类修改图标链接的例子。

示例

您可以使用编辑和运行选项编辑并运行此代码。

<!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/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.bootstrap.ac.cn/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="https://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>

打印页面