Bootstrap 简明教程
Bootstrap - Icon link
本章讨论图标链接，通过图标链接，可以对超链接和其他图标进行样式美化。
This chapter discusses about icon links, through which you can stylize the hyperlinks and other icons.
在 Bootstrap 中，图标链接是一个带有图标的链接。该图标可以放置在链接文本之前或之后，它通常用于为用户提供额外的上下文或视觉提示。
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 与任何图标或图像一起用于图标链接。
Bootstrap icons along with any icon or image can be used in the icon links.
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
要将图标链接中的图标移到右侧，请向 .icon-link 类添加实用类 .icon-link-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
要修改图标链接的下划线颜色和偏移量，请使用 Bootstrap 提供的自定义链接实用程序。
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>