How can I add social media icons to the body of my Dawn theme website?

[ahmy-com]

Hello, i want to have social media icons in the body of my website instead of footer on my homepage. But I can't find any solution on it or how to do it,btw im using dawn theme 10.0

[arunme]

@ahmy-com In Dawn theme we have code snippet called social-icons.liquid snippet which you can anywhere you want.

If you want to have social icon on home page somewhere you can go to your theme customisation > add section >custom liquid and paste this code 

<ul class="list-unstyled list-social{% if class %} {{ class}}{% endif %}" role="list">
  {%- 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>

[ahmy-com]

I don't get this where is add section, i want to put social media icon in body in the rich text section

[arunme]

@ahmy-com  there is no direct way to add social media icon in rich text, you have can either add custom liquid section like below or you need to modify theme code to support this 

[ahmy-com]

I can't see an option to add custom liquid in dawn

[arthadeka]

how to make the position in the center on the desktop display ?

[nestly]

Add this code, I actually has a premium theme[focal] and what I did it to copy the social-media.liquid content.

Go to the page I was editing [for me Contact Us template] and adding Custom Liquid, and the CSS through Theme settings

.social-media {
  justify-content:center;
}