はじめまして、初心者です。よろしくお願いいたします。
フォントアイコンを円形で囲みたいです。
円形の中央に配置したいのですが適用されません。
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; }
質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
回答1件
あなたの回答
tips
プレビュー