Replace Generic link icon with FontAwesome Icon

Suppose you have Email, Phone in Social Links Block.

and you need to replace them with email/phone icon.

#1. First, find ID of Social Links Block.
In my example, we will have: #block-yui_3_17_2_1_1730073565059_12902

#2. Next, use this code to Code Injection > Header (or add it to Code Block under Social Links, if your plan doesn’t support Code Injection)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

#3. Use this code to Custom CSS box

#block-yui_3_17_2_1_1730073565059_12902 {
a.sqs-svg-icon--wrapper[href*="tel"] svg, a.sqs-svg-icon--wrapper[href*="mailto"] svg {
    display: none;
}
a.sqs-svg-icon--wrapper[href*="tel"] div, a.sqs-svg-icon--wrapper[href*="mailto"] div {
    transform: unset !important;
}
a.sqs-svg-icon--wrapper[href*="tel"] div:before {
    content: "\f095";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 16px;
    position: relative;
    top: -15px;
}
a.sqs-svg-icon--wrapper[href*="mailto"] div:before {
    content: "\f0e0";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 16px;
    position: relative;
    top: -15px;
  }}

#4. Result