teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

詳細を詳しく記載しました。

2020/01/08 07:36

投稿

YusukeKoshiba
YusukeKoshiba

スコア15

title CHANGED
File without changes
body CHANGED
@@ -1,12 +1,42 @@
1
1
  お世話になります。
2
+
3
+
2
4
  現在下記CSSで丸アイコンの様に表示しているpタグを■▶(四角と三角のスペースはなし)のアイコン型に変えたいと考えております。
3
5
 
6
+ HTMLは下記です。
7
+ ```ここに言語を入力
8
+ <div class="Icons_Set">
9
+  <p id="First_Icon" class="InformationInput09_Icons_Child">
10
+   <i class="fas fa-mobile-alt"></i>
11
+  </p>
12
+  <p class="Icons_Set_Text">携帯番号
13
+  </p>
14
+ </div>
15
+ ```
16
+ CSSは下記です。
17
+ ```ここに言語を入力
18
+ #First_Icon {
4
19
  width: 50px;
5
20
  height: 50px;
6
21
  border-radius: 50%;
7
22
  border: solid 1px #b7b7b7;
8
23
  display: inline-block;
9
24
  position: relative;
25
+ }
26
+ #First_Icon i{
27
+ color: #b7b7b7;
28
+ font-size: 24px;
29
+ position: absolute;
30
+ top: 50%;
31
+ left: 50%;
32
+ transform: translate(-50%, -50%);
33
+ }
34
+ ```
35
+ 現状の表示は下記です。
36
+ ![イメージ説明](88df40d179db452781598fa2a9e4ed92.png)
10
37
 
38
+ こちらを下記のような形に変更したいです。
39
+ ![イメージ説明](13c6c5c4fc287684e0716a0b4b53a0d9.png)
40
+
11
41
  border-radiusで変更できると思うのですが、やり方をご教示頂けないでしょうか?
12
42
  何卒、よろしくお願いいたします。