サイドバーのソーシャルボタンをサルワカと同じ四角いものにしたい

まずカスタムHTMLウィジェットに以下のコードを追加します。

<div class="square-flex">
  <a class="square-btn btn1" href="ここにURL" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i><div class="square-btn-text dfont">Twitter</div></a>
  <a class="square-btn btn2" href="ここにURL" target="_blank" rel="nofollow"><i class="fa fa-rss"></i><div class="square-btn-text dfont">Feedly</div></a>
</div>

次に子テーマのstyle.cssに以下のCSSを追加します。

/*サイドバーのSNSボタン*/
.square-flex {
	padding:1em 1em 0;
	display:flex;
	justify-content:space-between;
	text-align:center
}
.square-btn {
	display:block;
	width:48%;
	padding: .5em 0 .3em;
	background: silver;
	border-radius:5px;
	color: #FFF;
	margin-bottom:1em;
}
.square-btn .fa {
	display: block;
	font-size: 30px;
}
.square-btn-text {
	font-size: 13px;
}
/*色指定*/
.square-btn.btn1 {
	background: #73bcf3;
}
.square-btn.btn2 {
	background: #73bcf3;
}
/*END サイドバーのSNSボタン*/

色指定については、aタグ内にbtn1、btn2というようなクラス名が入っているので、それに対して指定します。

お世話になっております。
以前サルワカさんやマクリンさんのようなシェアボタンの設置についてお伺いしたものです。

その後質問を探したら似たような質問を見つけたので（2018/08/16 トムさんの質問でサルワカさんの本家と同じく四角いフォローボタンにしたい）、試して見たのですが
①Twitterのロゴが表示されない。
②マクリンさんの様にマウスオン時に色が濃くなるようにしたい。
③ブログ村やブログランキングなどのロゴの追加はどうすればよいのか？
④質問の回答にあったCSSを追加したら padding: .5em 0 .3em;の箇所に！マークが付いてしまった。
サイトはcssなどをコピーしたままの状態にしてあります。

宜しくお願い致します。
無知で申し訳ありません。
お時間ありましたらご回答お願いします。

サイドバーのソーシャルボタンをサルワカと同じ四角いものにしたいのカスタマイズを行っている前提でかきます。

①Twitterのロゴが表示されない。
⇒FontAwesome5では

<i class="fa fa-twitter"></i>

ではなく

<i class="fab fa-twitter"></i>

とする必要があります。

②マクリンさんの様にマウスオン時に色が濃くなるようにしたい。
⇒以下のようなCSSを追加すればOKです。

.square-btn:hover {
  background-color: #色コード;
}

③ブログ村やブログランキングなどのロゴの追加はどうすればよいのか？
⇒「WordPress　ブログ村」などでググってみてください。

④質問の回答にあったCSSを追加したら padding: .5em 0 .3em;の箇所に！マークが付いてしまった。
⇒気にしなくて良いと思います。

よろしくお願いします。