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="https://tutorialspoint.tw/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="https://tutorialspoint.tw/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="https://tutorialspoint.tw/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/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="https://tutorialspoint.tw/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>

列印頁面