アイコンフォントの配置について

はじめまして、初心者です。よろしくお願いいたします。

フォントアイコンを円形で囲みたいです。
円形の中央に配置したいのですが適用されません。

cssの最後にある「line-height」が機能していないようです。
どのようにすると良いでしょうか。

利用しているソフト　Brackets
アイコンフォント　awesome

HTMLは下記の内容です。

<head>
    <meta charset="UTF-8">
    <title>アイコンフォント囲む</title>
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>
<body>
<section class="flow">
        <h2>FLOW</h2>
        <div class="flow-wrapper">
            <div class="flow-box">
                <i class="flow-icon fa fa-mobile"></i>
                <div class="flow-title">ご予約</div>
                <p class="flow-text">ご連絡おまちしております。</p>
            </div></div>
</section>
</body>

CSSは下記の内容です。

.flow-wrapper{
    display: table;
    width: 100%;
    margin: 50px auto 0;
    table-layout: fixed;
}
.flow-box{
    display: table-cell;
}
.flow-icon{
    width: 150px;
    height: 150px;
    margin-bottom: 30px;
    border: 4px solid;
    border-radius: 50%;
    color: #ff4400;
    font-size: 8rem;
    line-height: 142px;
}

kei344

2018/06/08 07:43

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

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

回答1件

ベストアンサー

CSS
1/* 方法1 */
2.flow-icon.fa {
3  position: relative;
4}
5
6.flow-icon.fa::before {
7  position: absolute;
8  top: 50%;
9  left: 50%;
10  transform: translate(-50%, -50%);
11}
12
13/* 方法2 */
14.flow-icon.fa {
15  display: flex;
16  justify-content: center;
17  align-items: center;
18}