html - Making an <i> tag inside of button tag

Question

I am not able to implement a thumbs-up icon or thumbs-down icon. Whenever I try to add them it just doesn't work. It disappears. So I just wanted to know how to add the thumbs-up icon code into the button code. I want help with replacing only the button tag with <i> tag.

My code:

<form action="{% url 'dislike_post' post.pk %}" method="POST">
        {% csrf_token %}
    {% if user.is_authenticated %}
        {% if liked %}

            
        {% elif disliked %}

            <button style="display:block; margin:0.5em; text-transform: capitalize; text-align: center;",type='submit', name='post_id', value="{{ post.id }}", class="btn btn-primary btn-sm">Undislike</button>
             {{ total_dislikes }} Dislikes
             {{ total_likes }} Likes
        {% else %}
            <button style="display:block; margin:0.5em; text-transform: capitalize; text-align: center;", type='submit', name='post_id', value="{{ post.id }}", class="btn btn-danger btn-sm">Dislike</button> 
            {{ total_dislikes }} Dislikes

        {% endif %}

    {% else %}
        <small><a href="{% url 'login' %}" >Login to like and dislike the post</small>

    {% endif %}

    </form>
    <form action="{% url 'like_post' post.pk %}" method="POST">
        {% csrf_token %}
    {% if user.is_authenticated %}
        {% if liked %}

            <button style="display:block; margin:0.5em; text-transform: capitalize; text-align: center;",type='submit', name='post_id', value="{{ post.id }}", class="btn btn-danger btn-sm">Unlike</button>
            {{ total_dislikes }} Dislikes
            {{ total_likes }} Likes
        {% elif disliked %}


        {% else %}
            <button style="display:block; margin:0.5em; text-transform: capitalize; text-align: center;",type='submit', name='post_id', value="{{ post.id }}", class="btn btn-primary btn-sm">Like</button>
            {{ total_likes }} Likes

</form>
        {% endif %}
    {% else %}

    {% endif %}

Thumbs-up and thumbs-down needed code:

<i class="fas fa-thumbs-up"></i>
<i class="fas fa-thumbs-down"></i>

what I have tried:

<button style="display:block; margin:0.5em; text-transform: capitalize; text-align: center;",type='submit', name='post_id', value="{{ post.id }}"><i class="fas fa-thumbs-down"></i></button>

<i style="display:block; margin:0.5em; text-transform: capitalize; text-align: center;",type='submit', name='post_id', value="{{ post.id }}"class="fas fa-thumbs-down"</i>

But sadly none of them worked. Hope someone can help me.

Answer 1

Fontawesome is not a built in part of HTML and/or CSS.

You need to load the fontawesome code.

Look up the fontawesome documentation which tells you how to get a kit code and add the appropriate line to the head of your document.

See https://fontawesome.com/start