fontawesome の アイコンを円の線で囲む

この方法なら文字も囲める。

参考
https://codepen.io/noixip/pen/mWYeBa

リンクあり

hoge.css

<style>
.maru {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    flex-flow: column;
    vertical-align: top;
    font-size: 24px;
    color:#ea3f60 !important;
}
/* 円の大きさ */
.heart{
    width: 50px;
    height: 50px;
    color: #ea3f60;
    border: 2px solid #ea3f60;
    background-color: #fff;
}
</style>

今回はリンクボタンにしたいので、以下にする。

hoge.html

//一般
<a class="maru heart">
<i class="far fa-heart"></i>
</a>

//vue.js
<router-link :to="{ path: '/login'}" class="maru heart">
<i class="far fa-heart"></i>
</router-link>