回答編集履歴
1
別案追加
answer
CHANGED
|
@@ -34,4 +34,38 @@
|
|
|
34
34
|
}
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
+
[動作確認用サンプル](https://codepen.io/hatena19/pen/BayYMOv)
|
|
38
|
+
|
|
39
|
+
追記
|
|
40
|
+
---
|
|
41
|
+
他の方の回答のSVGを使う方法を勉強がてら作成してみましたので紹介します。
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<div class="Icons_Set">
|
|
45
|
+
<p id="Second_Icon">
|
|
46
|
+
<svg x=0 y=0 width=76 height=51 style="background-color: #fff">
|
|
47
|
+
<polygon points="1 1, 50 1, 75 25, 50 50, 1 50" stroke="#b7b7b7" fill="none" stroke-width="1" />
|
|
48
|
+
</svg>
|
|
49
|
+
<i class="fas fa-mobile-alt"></i>
|
|
50
|
+
</p>
|
|
51
|
+
<p class="Icons_Set_Text">携帯番号
|
|
52
|
+
</p>
|
|
53
|
+
</div>
|
|
54
|
+
```
|
|
55
|
+
```css
|
|
56
|
+
#Second_Icon {
|
|
57
|
+
width: 76px;
|
|
58
|
+
height: 51px;
|
|
59
|
+
display: inline-block;
|
|
60
|
+
position: relative;
|
|
61
|
+
}
|
|
62
|
+
#Second_Icon i {
|
|
63
|
+
color: #b7b7b7;
|
|
64
|
+
font-size: 24px;
|
|
65
|
+
position: absolute;
|
|
66
|
+
top: 50%;
|
|
67
|
+
left: 35%;
|
|
68
|
+
transform: translate(-50%, -50%);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
37
71
|
[動作確認用サンプル](https://codepen.io/hatena19/pen/BayYMOv)
|