border-radius
は矩形の角を丸めるものですので、円か楕円の一部しか描画できません。
CSSで実装するなら、一つの案として、before疑似要素をtransformで45度回転させていい位置に配置するという方法があります。
css
1#First_Icon {
2 width: 50px;
3 height: 50px;
4/* border-radius: 50%; */
5 border: solid 1px #b7b7b7;
6 display: inline-block;
7 position: relative;
8}
9#First_Icon i{
10 color: #b7b7b7;
11 font-size: 24px;
12 position: absolute;
13 top: 50%;
14 left: 56%;
15 transform: translate(-50%, -50%);
16}
17/* 以下追加 */
18#First_Icon::before {
19 content:"";
20 width: 35px;
21 height: 35px;
22 border-top: solid 1px #b7b7b7;
23 border-right: solid 1px #b7b7b7;
24 background-color: white;
25 position: absolute;
26 top: 7px;
27 left: 33px;
28 transform: rotate(45deg);
29}
動作確認用サンプル
追記
他の方の回答のSVGを使う方法を勉強がてら作成してみましたので紹介します。
html
1<div class="Icons_Set">
2 <p id="Second_Icon">
3 <svg x=0 y=0 width=76 height=51 style="background-color: #fff">
4 <polygon points="1 1, 50 1, 75 25, 50 50, 1 50" stroke="#b7b7b7" fill="none" stroke-width="1" />
5 </svg>
6 <i class="fas fa-mobile-alt"></i>
7 </p>
8 <p class="Icons_Set_Text">携帯番号
9 </p>
10</div>
css
1#Second_Icon {
2 width: 76px;
3 height: 51px;
4 display: inline-block;
5 position: relative;
6}
7#Second_Icon i {
8 color: #b7b7b7;
9 font-size: 24px;
10 position: absolute;
11 top: 50%;
12 left: 35%;
13 transform: translate(-50%, -50%);
14}
動作確認用サンプル