[Share] Add Phone/Email/Address Icon before Text

Some useful code to add icons before text like this.

If you can't make it work, you can send link to page where you added Text Block, I will check again.

#1. Suppose we have 3 texts like this. Make sure each line is a Paragraph. Do not use Shift-Enter to create the break.

If you want to remove space between paragraph lines, we will use code in last step

#2. Find ID of Text Block

In my example, we will have:

#block-yui_3_17_2_1_1719906734967_2500

#3. Use this line to Code Injection Header. If the site doesn’t support Code Injection, you can add it via Code Block.

<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" />

#4. Visit FontAwesome website to find the Phone, Email, and Address Icon.

Next, click Free then click a desired icon

and save this text

#5. After you have found all 3 icons, you can use this code to Custom CSS box

div#block-yui_3_17_2_1_1719906734967_2500 {
/* Address */
p:nth-child(1):before {
    content: "\f3c5";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 28px;
    margin-right: 5px;
}
/* Phone */
p:nth-child(2):before {
    content: "\f095";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 28px;
    margin-right: 5px;
}
/* Email */
p:nth-child(3):before {
    content: "\f0e0";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 28px;
    margin-right: 5px;
}}

Result