'Why doesn't appear my icon in the button using far fa-paper-plane?

currently I'm working on a css of a newsletter sign up. However I got a problem using an icon in my button ("Senden"). I won't appear and I have no clue why. I have already looked up in the net, but couldn't find a solution.

Here is my html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7_dtp.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="index.css">
</head>
<body>



<div id="mc_embed_signup">

    <form action="https://adra.us6.list-manage.com/subscribe/post?u=e2d5faa9b94a0d751d430e84b&amp;id=28f961ba01" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

        <div id="mc_embed_signup_scroll">

            <h5>Newsletter abonnieren und
                am letzten Stand der Dinge bleiben.</h5>

<!--            <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>-->

            <div class="mc-field-group input-group">

                <ul><li><input type="checkbox" value="Herr" name="MMERGE3" id="mce-MMERGE3-0" required><label for="mce-MMERGE3-0">Herr</label></li>

                    <li><input type="checkbox" value="Frau" name="MMERGE3" id="mce-MMERGE3-1"><label for="mce-MMERGE3-1">Frau</label></li>

                    <li><input type="checkbox" value="Anders" name="MMERGE3" id="mce-MMERGE3-2"><label for="mce-MMERGE3-2">Anders</label></li>

                </ul>

            </div>

            <div class="mc-field-group">


                <input type="text" value="" name="VNAME" class="required" id="mce-VNAME" placeholder="Vorname" required>

            </div>

            <div class="mc-field-group">

                <input type="text" value="" name="LNAME" class="required" id="mce-LNAME" placeholder="Nachname" required>

            </div>

            <div class="mc-field-group">

                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="eMail" required>

            </div>

            <div id="mce-responses" class="clear foot">

                <div class="response" id="mce-error-response" style="display:none"></div>

                <div class="response" id="mce-success-response" style="display:none"></div>

            </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->

            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e2d5faa9b94a0d751d430e84b_28f961ba01" tabindex="-1" value=""></div>

            <div class="optionalParent">
                <div class="clear foot">
                    <button name="subscribe" id="mc-embedded-subscribe" class="button"><i class="far fa-paper-plane"></i>Senden</button>
                </div>
            </div>
            
        </div>

    </form>

</div>

</body>
</html>

Here is my css-code:

:root {
    --primary-color: #007960;
    --secondary-color: #E6B000;
    --border-color: #D9D9D6;
}

body {
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    width: 100%;
}


#mc_embed_signup h5 {
    font: 20px Montserrat;
    color: var(--primary-color);
    font-weight: 300;
    margin-bottom: 10px;
    text-align: center;
}

.input-group ul {
    font-weight: bold;
    font: 16px Zilla Slab;
    display: flex;
    justify-content: space-between;
    width: 35%;

}

.mc-field-group input {
    background: #ffffff;
    padding: 4px 12px;
    border-color: var(--border-color);
    border-width: 1px 1px 1px 1px;
    border-radius: 3px 3px 3px 3px;
    margin-top: -20px;
}

.optionalParent #mc-embedded-subscribe {
    background: var(--primary-color);
    color: #ffffff;
    width: 135%;
    margin-top: -20px;
}

.optionalParent #mc-embedded-subscribe:hover {
    background-color: var(--primary-color);
}

.optionalParent button {

    font: 15px Zilla;
}
.btn {
    background-color: light-green;
    padding: 12px 16px;
    font-size: 16px;
}
.btn:hover {
    color: green;
    font-size: 1.5em;
}

Thank you for your help! .........................................................................................................................................................

Solution 1:^[1]

Because you need to add the font-awesome library script src to your <head>.

:root {
  --primary-color: #007960;
  --secondary-color: #E6B000;
  --border-color: #D9D9D6;
}

body {
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  width: 100%;
}

#mc_embed_signup h5 {
  font: 20px Montserrat;
  color: var(--primary-color);
  font-weight: 300;
  margin-bottom: 10px;
  text-align: center;
}

.input-group ul {
  font-weight: bold;
  font: 16px Zilla Slab;
  display: flex;
  justify-content: space-between;
  width: 35%;
}

.mc-field-group input {
  background: #ffffff;
  padding: 4px 12px;
  border-color: var(--border-color);
  border-width: 1px 1px 1px 1px;
  border-radius: 3px 3px 3px 3px;
  margin-top: -20px;
}

.optionalParent #mc-embedded-subscribe {
  background: var(--primary-color);
  color: #ffffff;
  width: 135%;
  margin-top: -20px;
}

.optionalParent #mc-embedded-subscribe:hover {
  background-color: var(--primary-color);
}

.optionalParent button {
  font: 15px Zilla;
}

.btn {
  background-color: light-green;
  padding: 12px 16px;
  font-size: 16px;
}

.btn:hover {
  color: green;
  font-size: 1.5em;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7_dtp.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" href="index.css">
</head>

<body>



  <div id="mc_embed_signup">

    <form action="https://adra.us6.list-manage.com/subscribe/post?u=e2d5faa9b94a0d751d430e84b&amp;id=28f961ba01" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

      <div id="mc_embed_signup_scroll">

        <h5>Newsletter abonnieren und am letzten Stand der Dinge bleiben.</h5>

        <!--            <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>-->

        <div class="mc-field-group input-group">

          <ul>
            <li><input type="checkbox" value="Herr" name="MMERGE3" id="mce-MMERGE3-0" required><label for="mce-MMERGE3-0">Herr</label></li>

            <li><input type="checkbox" value="Frau" name="MMERGE3" id="mce-MMERGE3-1"><label for="mce-MMERGE3-1">Frau</label></li>

            <li><input type="checkbox" value="Anders" name="MMERGE3" id="mce-MMERGE3-2"><label for="mce-MMERGE3-2">Anders</label></li>

          </ul>

        </div>

        <div class="mc-field-group">


          <input type="text" value="" name="VNAME" class="required" id="mce-VNAME" placeholder="Vorname" required>

        </div>

        <div class="mc-field-group">

          <input type="text" value="" name="LNAME" class="required" id="mce-LNAME" placeholder="Nachname" required>

        </div>

        <div class="mc-field-group">

          <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="eMail" required>

        </div>

        <div id="mce-responses" class="clear foot">

          <div class="response" id="mce-error-response" style="display:none"></div>

          <div class="response" id="mce-success-response" style="display:none"></div>

        </div>
        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->

        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e2d5faa9b94a0d751d430e84b_28f961ba01" tabindex="-1" value=""></div>

        <div class="optionalParent">
          <div class="clear foot">
            <button name="subscribe" id="mc-embedded-subscribe" class="button"><i class="far fa-paper-plane"></i> Senden</button>
          </div>
        </div>

      </div>

    </form>

  </div>

</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Kameron

'Why doesn't appear my icon in the button using far fa-paper-plane?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]