我无法实现拇指向上图标或拇指向下图标。每当我尝试添加它们时,它都不起作用。它消失了。所以我只想知道如何将大拇指图标代码添加到按钮代码中。我需要帮助,仅用 <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>
但遗憾的是,它们都不起作用。希望有人能帮助我。
答案 0 :(得分:1)
Fontawesome 不是 HTML 和/或 CSS 的内置部分。
您需要加载 fontawesome 代码。
查找 fontawesome 文档,该文档告诉您如何获取套件代码并将适当的行添加到文档的开头。
答案 1 :(得分:0)
我只是用这样的引导程序伪装按钮:
<button type='submit', name='post_id', value="{{ post.id }}", class="btn btn-light"><i class="fas fa-thumbs-up"></i></button>
{{ total_likes }} Likes
它奏效了。感谢大家的帮助。
答案 2 :(得分:-1)
像这样在类属性中使用 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>
答案 3 :(得分:-2)
您可以尝试使用这样的代码:
<a href="https://www.link.com/" target="_blank">
<i class="fas fa-thumbs-up"></i>
</a>