質問編集履歴

1

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

2020/01/08 07:36

投稿

YusukeKoshiba
YusukeKoshiba

スコア15

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,38 @@
1
1
  お世話になります。
2
+
3
+
4
+
5
+
2
6
 
3
7
  現在下記CSSで丸アイコンの様に表示しているpタグを■▶(四角と三角のスペースはなし)のアイコン型に変えたいと考えております。
4
8
 
5
9
 
10
+
11
+ HTMLは下記です。
12
+
13
+ ```ここに言語を入力
14
+
15
+ <div class="Icons_Set">
16
+
17
+  <p id="First_Icon" class="InformationInput09_Icons_Child">
18
+
19
+   <i class="fas fa-mobile-alt"></i>
20
+
21
+  </p>
22
+
23
+  <p class="Icons_Set_Text">携帯番号
24
+
25
+  </p>
26
+
27
+ </div>
28
+
29
+ ```
30
+
31
+ CSSは下記です。
32
+
33
+ ```ここに言語を入力
34
+
35
+ #First_Icon {
6
36
 
7
37
  width: 50px;
8
38
 
@@ -16,6 +46,36 @@
16
46
 
17
47
  position: relative;
18
48
 
49
+ }
50
+
51
+ #First_Icon i{
52
+
53
+ color: #b7b7b7;
54
+
55
+ font-size: 24px;
56
+
57
+ position: absolute;
58
+
59
+ top: 50%;
60
+
61
+ left: 50%;
62
+
63
+ transform: translate(-50%, -50%);
64
+
65
+ }
66
+
67
+ ```
68
+
69
+ 現状の表示は下記です。
70
+
71
+ ![イメージ説明](88df40d179db452781598fa2a9e4ed92.png)
72
+
73
+
74
+
75
+ こちらを下記のような形に変更したいです。
76
+
77
+ ![イメージ説明](13c6c5c4fc287684e0716a0b4b53a0d9.png)
78
+
19
79
 
20
80
 
21
81
  border-radiusで変更できると思うのですが、やり方をご教示頂けないでしょうか?