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/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>

让我们看另一个例子，其中图标放置在图标链接中的文本后面：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>

悬停时的样式

为了将图标链接中的图标向右移动，请将实用程序类.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/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>

公用事业

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

要向图标链接添加颜色，请使用类link-*（其中 * 可以是任何颜色模式，如危险、成功、警告、信息等）
要向图标链接下的线条添加颜色，请使用类link-underline-*，其中 * 可以是任何颜色模式，例如危险、成功、警告、信息等。）
要为 iconlink 下的线条添加不透明度，请使用类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/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>