fontawesomeとh3を横並びにしたい

Question

こちらのサイトの
http://spiritualcompany.net/portfolio/mosya1/index.html

一番下にある、「24時間365日の電話サポート」というh3タグの文字をfontawesome（電話のマーク）の中央に配置したいです。

現在のコードが、

<div class="col-md-6">
            <h3><i class="fas fa-phone fa-2x"></i>24時間365日の電話サポート</h3>
            <p>電話でオンラインツールの使い方のサポートや、
              売上アップのための施策に関するお問い合わせ
              を受け付けます。
            </p>

と並べるためにh3タグの中に入れていますが、

<div class="col-md-6">
            <i class="fas fa-phone fa-2x"></i><h3>24時間365日の電話サポート</h3>
            <p>電話でオンラインツールの使い方のサポートや、
              売上アップのための施策に関するお問い合わせ
              を受け付けます。
            </p>

と個別に配置した場合、iタグの電話のマークが改行されてしまいます。インライン表示にしようと、CSSでdisplay:inlineとしても改行されてしまいます。

今のように、電話マークの下側にh3の文字がくるのではなくく、中央（縦方向の）に並ぶようにするにはどうすればいいのでしょうか？

Comments

[m.ts10806]

提示URLは質問者自身のものでしょうか。
質問者自身のものとして、自身で設計したものですか？模写ですか？

[dobashi]

自身で作ったものです。模写です。

[m.ts10806]

なるほど。模写したものを「ポートフォリオにする」というのは非常に微妙なものですね。作品集に自分が考えたものではないものを載せてよいのかどうかという根本部分。まぁ細かいところですし本件とは外れますが、もし就活に利用するつもりならご注意を。

[dobashi]

アドバイスありがとうございます。模写したものですと公開しようと思っていたのですが、問題ですかね。

[m.ts10806]

例えばこんな意見もあります。https://hoshi-log.com/portfolio-kakuu/

[dobashi]

なるほど。参考になります。
今回の模写したものは、質問用に挙げたので、次回は、架空サイトを作っていこうと思います。
ありがとうございます。

Answer 1

こんにちは。

display: inlineを使えばいいかと思いますよ。

サンプル

Comments

[dobashi]

ありがとうございます。
iではなく、h3のブロック要素のせいで改行されていたのですね。
勉強になります。