如何将前导图标添加到我的 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
    }