Add these orange arrows for styling to text row

Hello, I am looking at trying to add these orange arrows for styling. Currently, they are emojis for this example but could you help me add them in as CSS? 

49 minutes ago, harley said:

Hello, I am looking at trying to add these orange arrows for styling. Currently, they are emojis for this example but could you help me add them in as CSS? 

Can you share your URL so I can check it?

  If your site is not published yet, provide it with a protected password, share it here so we can access your site

https://heron-flute-czy4.squarespace.com/config/

Password is apples09

@hoaLT

On 8/5/2024 at 10:17 PM, harley said:

https://heron-flute-czy4.squarespace.com/config/

Password is apples09

@hoaLT

 

You can use this approach.

#1. First, find ID of Text Block. You can use below tool.

In my example, we will have: #block-yui_3_17_2_1_1723019960346_3692

(here I test on my test site)

#2. Use this code to Code Injection Header (If your plan is Personal Plan, you can add it via Code Block in Site Footer)

<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

#block-yui_3_17_2_1_1723019960346_3692 p:before {
    content: "\f04b";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    color: #f86443;
    font-size: 30px;
    margin-right: 5px;
}

#4. Result