如何將前導圖標添加到我的 html 按鈕？

Question

我正在嘗試使用 HTML 制作鏈接樹類型的網站。 一切順利，但我不確定如何在按鈕左側添加圖標。

這是我到目前為止所擁有的：

 .button { transition: all.2s ease-in-out; background-color: #3481b4; opacity: 0.8; border-radius: 12px; border-color: white; border-style: double; color: white; padding: 14px 28px; padding-left: 48px; text-align: center; text-decoration: none; display: inline-block; max-width: 85%; min-width: 80%; font-size: 18px; } button:hover { transform: scale(1.1); }

 <button class="button" onclick="function()">Twitter</button>

Answer 1

這可以像這樣超級簡單，也可以更復雜——所以沒有吸引力，但這只是這里“如何”而不是“看起來很棒”的一種替代方法。

 img { display: inline-block; background-color: pink; }.button { transition: all.2s ease-in-out; background-color: #3481b4; opacity: 0.8; border-radius: 0.75rem; border-color: white; border-style: double; color: white; padding: 1rem 2rem; padding-left: 4rem; text-align: center; text-decoration: none; display: inline-block; max-width: 85%; min-width: 80%; font-size: 1.25rem; }.button button { color: #ffffff; background-color: #3481b4; border: none; font-size: 1em; }.button button::before { content: url('blacktweet.png'); alt: "My Tweet:"; } @supports (content: "x" / "y") {.button button::before { content: "★" / "tweet Text:"; } } @supports not (content: "x" / "y") {.button button::before { content: "★"; alt: "tweet Text:"; } }.button:hover { transform: scale(1.1); }

 <button class="button" onclick="function()"><img src="some.png" alt="bird tweet button">Twitter</button> <div>Here we place a character "icon" on this:</div> <div class="button"> <button class="xxx">Twitter</button> </div>

Answer 2

另一種有用的方法是使用圖標庫，例如 Font Awesome 或類似的類型，您可以在其中將其用作 CSS 中的字體，並且在元素過多的情況下可以使您的代碼更簡潔。

以下技術包括將填充留給按鈕並使用::before插入圖標：

 .button { padding-left: 80px; }.button::before { font-family: "Font Awesome 5 Brands"; font-weight: 400; content: "\f099"; width: 80px; height: 80px; }.button { transition: all.2s ease-in-out; background-color: #3481b4; opacity: 0.8; border-radius: 12px; border-color: white; border-style: double; color: white; padding: 14px 28px; padding-left: 48px; text-align: center; text-decoration: none; display: inline-block; max-width: 85%; min-width: 80%; font-size: 18px; } button:hover { transform: scale(1.1); }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <button class="button" onclick="function()"> Twitter </button>

Answer 3

在按鈕元素內添加圖標。

<button class="button" onclick="function()"><i src="path or url of the icon"></i>Twitter</button>

從中獲取圖標的最佳位置是 font awsome。

Answer 4

 .button { transition: all.2s ease-in-out; background-color: #3481b4; opacity: 0.8; border-radius: 12px; border-color: white; border-style: double; color: white; padding: 14px 28px; padding-left: 48px; text-align: center; text-decoration: none; display: inline-block; max-width: 85%; min-width: 80%; font-size: 18px; }

 <script src="https://use.fontawesome.com/f9acb8e72a.js"></script> <button class="button" onclick="function()"><i class="fa fa-twitter"></i> Twitter</button>

Answer 5

您可以使用相對位置在按鈕左側設置圖標

<button class="button" onclick="function()"><i class="fa-brands fa-twitter"></i> Twitter</button>

CSS

 button{
      width:100px;
      padding:10px;
    }
    
    i{
      position:absolute;
      left:15px
    }