How can I customize my social media icons to look like this?

[Achraf11]

Hello, please i want my social media icons looks exactly like this example in the picture below with "FOLLOW US" title

Thanks in advance

[GemPages]

Hello @Achraf11 ,

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

[Achraf11]

This is my store https://onefaa.com/

[BSS-Commerce]

Hi @Achraf11 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[Achraf11]

This is my store https://onefaa.com/

[GemPages]

Hello @Achraf11 ,

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

<style>
ul.footer__list-social.list-unstyled.list-social {
    position: relative;
    padding-top: 40px;
    margin-top: 10px;
}
ul.footer__list-social.list-unstyled.list-social:before {
    position: absolute;
    content: 'Follow Us';
    top: 0px;
    font-size: 21px;
    color: #fff;
}
</style> 

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[Achraf11]

Nothing change, please help 

[BSS-Commerce]

Hi @Achraf11 

Please follow these steps:

- Step 1: At Shopify Admin, select Online Store -> Themes -> Edit Code

- Step 2: Find and open the file social-icons.liquid

- Step 3: Replace the entire code in the social-icons.liquid file with the code below:

<div>
  <div class="follow-us">Follow Us</div>
  <ul class="footer__list-social list-unstyled list-social">
    {%- if settings.social_facebook_link != blank -%}
      <li class="list-social__item">
        <a href="{{ settings.social_facebook_link }}" class="link list-social__link" >
          {%- render 'icon-facebook' -%}
          <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
        </a>
      </li>
    {%- endif -%}
    {%- if settings.social_instagram_link != blank -%}
      <li class="list-social__item">
        <a href="{{ settings.social_instagram_link }}" class="link list-social__link" >
          {%- render 'icon-instagram' -%}
          <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
        </a>
      </li>
    {%- endif -%}
    {%- if settings.social_youtube_link != blank -%}
      <li class="list-social__item">
        <a href="{{ settings.social_youtube_link }}" class="link list-social__link" >
          {%- render 'icon-youtube' -%}
          <span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
        </a>
      </li>
    {%- endif -%}
    {%- if settings.social_tiktok_link != blank -%}
      <li class="list-social__item">
        <a href="{{ settings.social_tiktok_link }}" class="link list-social__link" >
          {%- render 'icon-tiktok' -%}
          <span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
        </a>
      </li>
    {%- endif -%}
    {%- if settings.social_twitter_link != blank -%}
      <li class="list-social__item">
        <a href="{{ settings.social_twitter_link }}" class="link list-social__link" >
          {%- render 'icon-twitter' -%}
          <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
        </a>
      </li>
    {%- endif -%}
    {%- if settings.social_pinterest_link != blank -%}
      <li class="list-social__item">
        <a href="{{ settings.social_pinterest_link }}" class="link list-social__link" >
          {%- render 'icon-pinterest' -%}
          <span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
        </a>
      </li>
    {%- endif -%}
    {%- if settings.social_snapchat_link != blank -%}
      <li class="list-social__item">
        <a href="{{ settings.social_snapchat_link }}" class="link list-social__link" >
          {%- render 'icon-snapchat' -%}
          <span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
        </a>
      </li>
    {%- endif -%}
    {%- if settings.social_tumblr_link != blank -%}
      <li class="list-social__item">
        <a href="{{ settings.social_tumblr_link }}" class="link list-social__link" >
          {%- render 'icon-tumblr' -%}
          <span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
        </a>
      </li>
    {%- endif -%}
    {%- if settings.social_vimeo_link != blank -%}
      <li class="list-social__item">
        <a href="{{ settings.social_vimeo_link }}" class="link list-social__link" >
          {%- render 'icon-vimeo' -%}
          <span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
        </a>
      </li>
    {%- endif -%}
  </ul>
</div>
<style>
  .follow-us {
    font-size: 20px;
    color: #000;
  }
</style>

- Step 4: Save your code.

We hope that this can help you.

[Achraf11]

Nothing change ; please i need more help