Question

我无法实现拇指向上图标或拇指向下图标。每当我尝试添加它们时，它都不起作用。它消失了。所以我只想知道如何将大拇指图标代码添加到按钮代码中。我需要帮助，仅用 <i> 标记替换按钮标记。

我的代码：

<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 %}

赞和不赞需要的代码：

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

我尝试过的：

<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>

但遗憾的是，它们都不起作用。希望有人能帮助我。

Answer 1

Fontawesome 不是 HTML 和/或 CSS 的内置部分。

您需要加载 fontawesome 代码。

查找 fontawesome 文档，该文档告诉您如何获取套件代码并将适当的行添加到文档的开头。

见https://fontawesome.com/start

Answer 2

我只是用这样的引导程序伪装按钮：

<button type='submit', name='post_id', value="{{ post.id }}", class="btn btn-light"><i class="fas fa-thumbs-up"></i></button>
            {{ total_likes }} Likes

它奏效了。感谢大家的帮助。

Answer 3

像这样在类属性中使用 fa 而不是 fas：

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

Answer 4

您可以尝试使用这样的代码：

<a href="https://www.link.com/" target="_blank">
   <i class="fas fa-thumbs-up"></i>
</a>

在按钮标签内制作 <i> 标签

4 个答案: