如何使用 CSS 放置心形按钮

Question

我想做一个心形按钮，所以我使用了一个字体很棒的图标，但我在定位它时遇到了问题。这就是我想要的心形按钮：

.h_container{
    background-color: #cac7c7;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    display: inline;

}
#heart{
    font-size: 25px;
}
#heart:hover{
    color:red;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Network</title>
        <script src="https://kit.fontawesome.com/3929e16ef5.js" crossorigin="anonymous"></script>
        <script src="{% static 'network/functions.js' %}"></script>
    </head>
    <body>

      <div class="h_container">
            <i id="heart" class="far fa-heart"></i>
      </div>
    </body>
</html>

这就是我得到的：

Answer 1

显然，容器应该是具有精确宽度和高度的 inline-block 并且 line-height（设置文本的正确垂直位置）而不是内联元素。

.h_container{
    background-color: #cac7c7;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    display: inline-block;
    width:35px;
    height:35px;
    text-align:center;
    line-height:45px;

}
#heart{
    font-size: 25px;
}
#heart:hover{
    color:red;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Network</title>
        <script src="https://kit.fontawesome.com/3929e16ef5.js" crossorigin="anonymous"></script>
        <script src="{% static 'network/functions.js' %}"></script>
    </head>
    <body>

      <div class="h_container">
            <i id="heart" class="far fa-heart"></i>
      </div>
    </body>
</html>

如何使用 CSS 放置心形按钮

How to place a heart button with CSS

html

css

font-awesome