是否可以使用 class AND Fontawesome 预定义输入？

Question

我的问题有点愚蠢，但我真的不明白这个 Fontawesome 的东西。所以我想做的是在这段代码中放一些图标：

<html>
    <head>
<script src="https://use.fontawesome.com/cea00496c5.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    <style>
    input.knopf {
        background-color: #f4511e;
        border: none;
        color: white;
        text-align: center;
        font-size: 32px;
        margin: 0px 0px;
        opacity: 0.3;
        transition: 1;
        width: 100%;
        height: 100%;
        padding: 25px;
    }
    input.knopf:hover {
        opacity: 1;
        background-color: #f4511e;
        color: white;
    }
    input.knopf2 {
        background-color: lightseagreen;
        border: none;
        color: white;
        text-align: center;
        font-size: 32px;
        margin: 0px 0px;
        opacity: 0.7;
        transition: 1;
        width: 100%;
        height: 100%;
        padding: 25px;
    }

    input.knopf2:hover {
        opacity: 1;
        background-color: lightseagreen;
        color: white;
    }
    input.knopf3 {
        background-color: blueviolet;
        border: none;
        color: white;
        text-align: center;
        font-size: 32px;
        margin: 0px 0px;
        opacity: 0.7;
        transition: 1;
        width: 100%;
        height: 100%;
        padding: 25px;
    }

    input.knopf3:hover {
        opacity: 1;
        background-color: blueviolet;
        color: white;
    }
    input.knopf4 {
        background-color: blue;
        border: none;
        color: white;
        text-align: center;
        font-size: 32px;
        margin: 0px 0px;
        opacity: 0.7;
        transition: 1;
        width: 100%;
        height: 100%;
        padding: 25px;
    }

    input.knopf4:hover {
        opacity: 1;
        background-color: deepskyblue;
        color: white;
    }
    </style>
    </head>
    <body>
        <h1>Wählen Sie aus in welchem Thema Sie Hilfe brauchen</h1>

        <table>
            <form></form>
            <tr>
        <th><input class="knopf " type="button"  value="Microsoft Outlook" onclick="window.location.href='#'"/></th>
        <th><input class="knopf2" type="button" value="Microsoft Word" onclick="window.location.href='/site/wiki/Seiten/Word%20Tastenk%c3%bcrzel.aspx'"/></th>
        <th><input class="knopf3" type="button" value="Microsoft Excel" onclick="window.location.href='/site/wiki/Seiten/Excel%20Tastaturk%c3%bcrzel.aspx'"/></th>
        <th><input class="knopf4" type="button" value="Zugriffsberechtigungen" onclick="window.location.href='/site/wiki/Seiten/Benutzerantrag%20Rollen%c3%bcbersicht.aspx'"/></th>
        </tr>
        <tr>

        <th><input class="knopf4" type="button" value="SharePoint" onclick="window.location.href='/site/wiki/Seiten/SharePoint.aspx'"/></th>
        <th><input class="knopf3" type="button" value="SAP" onclick="window.location.href='/site/wiki/Seiten/SAP%20Schulungen.aspx'"/></th>
        <th><input class="knopf2" type="button" value="Facilitymanagement" onclick="window.location.href='/site/wiki/Seiten/Hausmeister.aspx'"/></th>
        <th><input class="knopf" type="button" value="Skype for Business" onclick="window.location.href='/site/wiki/Seiten/Skype%20for%20Business.aspx'"/></th>
        </tr>
        <tr>
        <th><input class="knopf2" type="button" value="Drucken" onclick="window.location.href='#'"/></th>
        <th><input class="knopf" type="button" value="Mobile Geräte" onclick="window.location.href='#'"/></th>
        </tr>
        <tr>

        </tr>
    </form>
    </table>
    </body>
</html>

如您所见，我用 CSS 定义了按钮的样式。 Button的Text是用"Value="""制作的。我怎样才能在这个盒子里放一些很棒的字体图标？我真的不知道。我尝试声明更多类以供输入，但没有成功。

Answer 1

欢迎来到 SO Troi。

您可以通过 CSS 使用 :before 伪选择器将图标添加到您的按钮，从而在您的按钮中显示图标，或者您可以将图标放在您的按钮中HTML 像这样：

<button class="knopf2" onclick="window.location.href='/site/wiki/Seiten/Word%20Tastenk%c3%bcrzel.aspx'"><i class="fa fa-home"> Microsoft Word</button>

注意到我使用了现代 button 元素而不是输入，因为如果您正在学习，这是一个很好的练习。

是否可以使用 class AND Fontawesome 预定义输入？

Is it possible to have predefined Input with class AND Fontawesome?

html

css

input

font-awesome