請注意這裡的尺寸是 寬390 高844

請注意這裡的尺寸是 寬280 高653

就是說 寬280的場景會有你說的問題，可以用CSS的MediaQuery來處理，例如:

@media(max-width: 280px){
 /* 在這區塊修改css，例如: */
 span{padding:0px;}
 .fa-envelope::before...略..., .fa-user::before{
    right:0px;
 }
 /* 只是舉例，你要依實際情況去修改 */
}

你提供的資訊並不完整，所以我只能大概把自己的想法寫出來供您參考，希望有幫助。

在看你的原文中我有兩項題外話的建議:

1. 發問時附圖很好，但如果是跟程式碼有相關的，建議多利用markdown的原始碼標示，對想要幫忙回答問題的網友比較便利。
2. 圖片中有個Textbox用了 style="80%" 這個語法，建議少用這種寫法，這是一種在專案裡埋地雷的寫法(當然如果你跟專案經理有仇的話可以多寫...)，如果你在html原始碼裡面加入大量的style="...;...;" 那會導致很多你寫的CSS失效或者用js控制的css會失效，原因就是 CSS的選擇器有所謂的優先權，最高的就是html標籤裡面的style="..."，再來是id(#id)，再來是class(.class)，再來是擬別(:hover之類的)，再來是屬性(如[type="submit"])，最後是偽元素(如::before)。能用 style="..." 寫的都能改寫到 css style裡面，它唯一的好處就是可以馬上見效，當然這只是個建議。

補充一下，以上面的例子來說:
原本的:

<div style="80%" id="...">...略...</div>

改成:

<style>
.W100{width:100%;} /*或 width:100vw;*/
.W80{width:80%;} /*或 width:80vw;*/
</style>
<div class="W80" id="...">...略...</div>

這樣改寫後的好處就是，在某些情況下可以用 javascript把 class W80 拿掉改成 W100
或者直接加上前述的media query，例如:

@media(max-width: 280px){
 /* 在這區塊修改css，例如: */
 span{padding:0px;}
 .fa-envelope::before...略..., .fa-user::before{
    right:0px;
 }
 .W80{width:95%;} /*或 width:95vw;*/
 /* 只是舉例，你要依實際情況去修改 */
}

這裡的意思就是說在更高解析度時，區塊的寬度仍舊是80%，若畫面寬度為280時，則區塊寬度會變成95%，但如果你是寫style="width:80%" 那就無解了，因為它優先權最高，JS也動不了它。(當然凡事總有例外，還是有辦法動，不過那種就是大手術了)

我的想法是讓符號根據螢幕等比例縮小
以下是我學HTML基礎的筆記，我暫時沒有實做過，所以不曉得是否能提供幫助

不同的设备完美视口的大小是不一样的
iphone6 -- 375
iphone6plus -- 414
由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，
比如在iphone6中 375就是全屏，而到了plus中375就会缺一块
在移动端开发时，不建議使用px布局
vw 表示的是视口的宽度（viewport width）

• 100vw = 一个视口的宽度
• 1vw = 1%视口宽度
  vw这个单位永远相当于视口宽度进行计算
  设计图的宽度以 750px為範例
  使用vw作为单位
  100vw
  创建一个 48px x 35px 大小的元素
  100vw = 750px(设计图的像素) 0.1333333333333333vw = 1px
  6.4vw = 48px(设计图像素)
  4.667vw = 35px

學習參考
1.用瀏覽器的F12去觀察 CSS的運作
到底有那些元素的CSS語法被執行!!!

2.上面的步驟知道後
單獨做一張登入畫面login.html,不要包含後端程式

比如我在底下的網址.練習一個CSS flex語法

https://www.runoob.com/try/try.php?filename=trycss3_flexbox_direction_row-reverse

這時候,用瀏覽器F12觀察各個尺寸變化!!