FontAwesomeのアイコンを真ん中に表示したい

前提・実現したいこと

FontAwesomeを使って以下のようなTwitterへのリンクボタンを作成したいと考えています。

FontAwesomeを挿入するとリンクのように色が青くなってしまい、色を白、大きさを変更、真ん中へ寄せる方法が分かりません。
divクラスなどをわけて設定してみましたが、うまくいきません。

解決策をご存知の方はご教授頂けると幸いです。

該当のソースコード

html
1        <a class="tw-btn" href="twitter.com"><i class="fab fa-twitter"></i></a>

css
1.tw-btn {
2  width: 70px;
3  height: 70px;
4  margin: 5px;
5  display: inline-block;
6  border-radius: 10px;
7  -webkit-backdrop-filter: blur(30px);
8  backdrop-filter: blur(30px);
9  box-shadow: 0 10px 15px 0 rgba(55, 67, 116, 0.25);
10  background-color: #a5c1ff;
11}
12

補足情報（FW/ツールのバージョンなど）

FontAwesomeはv5.8.1を使用しています。

行動規範の内容に同意します

回答2件

css
1.tw-btn2 {
2  width: 70px;
3  height: 70px;
4  margin-left: auto;
5  margin-right: auto;
6  display: inline-block;
7
8  text-align: center;
9  line-height: 70px;
10
11  border-radius: 10px;
12  -webkit-backdrop-filter: blur(30px);
13  backdrop-filter: blur(30px);
14  box-shadow: 0 10px 15px 0 rgba(55, 67, 116, 0.25);
15  background-color: #a5c1ff;
16}

では、だめですか？
色はあえてそのままにしています。
質問者さんの例と上下表示してみました。

投稿2019/04/24 07:38

showkit

総合スコア1638

ベストアンサー

上記のコードをいかして修正するのであれば、以下のCSSを追加してみてください。

CSS
1.tw-btn {
2	color: #fff;
3	font-size: 34px;
4	text-decoration: none;
5	display: flex;
6	align-items: center;
7	justify-content: center;
8}

また、背景色も見本と揃える場合は背景色の指定を

CSS
1.tw-btn {
2	background-color: #7ECCF7;
3}

へ変更してください。

投稿2019/04/24 07:17

otamunote

総合スコア281

nztm

2019/04/24 09:48

ありがとうございます。アイコンは想像していたものが実装できました！ですが、アイコンが以下のように縦並びになってしまい、真ん中に寄せて2つ目のURLの画像のように表示したいのですが、どのようにすればいいでしょうか。連続の質問になってしまい申し訳ありません。現在の状況 https://gyazo.com/30a6a4ceafd75a7a2ca3aa2c457247fd イメージ https://gyazo.com/31ee56a035b46c7860821a547c3ffe31 ソースコード https://hastebin.com/efaraqudip.xml