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定义了按钮的样式。按钮的文本带有“ Value =”“”。如何在此框中放置一些字体惊人的图标？我真的不知道。我试图声明要输入的更多类，但是没有用。

Answer 1

欢迎来到SO Troi。

您可以使用:before伪选择器通过CSS在按钮上显示图标，将图标添加到按钮中，也可以将图标放在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元素而不是输入元素，因为如果您正在学习，那么这是一个很好的练习。

是否可以使用AND Fontawesome类具有预定义的Input？

1 个答案: