Можно ли иметь предопределенный ввод с классом AND Fontawesome? - PullRequest
Новая
       18

Можно ли иметь предопределенный ввод с классом AND Fontawesome?

0 голосов
/ 10 октября 2019

мой вопрос довольно тупой, но я не совсем понимаю эту потрясающую вещь. Итак, я хочу добавить несколько иконок в этот код: 

<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 =" "". Как я могу поместить несколько потрясающих иконок в это поле? Я буквально понятия не имею. Я пытался объявить больше классов для ввода, но это не сработало.

1 Ответ

0 голосов
/ 11 октября 2019

Добро пожаловать в 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 элемент, а не вход, потому что если вы изучаете, это хорошая практика, чтобы войти.

...