Bootstrap 简明教程
Bootstrap - Icon link
本章讨论图标链接，通过图标链接，可以对超链接和其他图标进行样式美化。
在 Bootstrap 中，图标链接是一个带有图标的链接。该图标可以放置在链接文本之前或之后，它通常用于为用户提供额外的上下文或视觉提示。
图标链接可用于向网站或应用程序中添加可视化趣味和交互性，可以在导航菜单、按钮或行为号召等各种场景中使用它们。默认链接样式由图标链接帮助程序类进行修改。它们会自动对任何图标和文本进行配对对齐，从而增强它们在页面上的显示效果。
Bootstrap icons 与任何图标或图像一起用于图标链接。
Example
-
要添加到常规 <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>让我们看另一个示例，其中图标放置在图标链接的文本之后：
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
<!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
要将图标链接中的图标移到右侧，请向 .icon-link 类添加实用类 .icon-link-hover 。
我们看一个示例：
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
<!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
要修改图标链接的下划线颜色和偏移量，请使用 Bootstrap 提供的自定义链接实用程序。
-
要为图标链接添加颜色，请使用类 link- *（其中 * 可以是以危险、成功、警告、信息等为前缀的任何颜色模式）
-
要为图标链接底部的线条添加颜色，请使用类 link-underline- *，其中 * 可以是任何颜色模式，例如危险、成功、警告、信息等）
-
若要为图标链接下的线条添加不透明度，请使用类 link-underline-opacity- *（其中 * 可以是诸如 50、55、75 等百分比数字。）
让我们看一个使用预定义的实用工具修改图标链接的示例：
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
<!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>