Add social media icons to header, left aligned DAWN theme

Store Design
,

Topic summary

A user seeks to add left-aligned social media icons to the header of their Dawn theme Shopify store.

Initial Solution Provided:

  • Edit theme code by accessing header.liquid or theme.liquid
  • Add HTML markup for social media icon links
  • Style icons using CSS in base.css file
  • Replace placeholder URLs with actual social media profiles

Implementation Issues:

  • User added code but icons don’t appear
  • Style code displays as visible text on the live site instead of rendering properly
  • Screenshots show the CSS code appearing as plain text rather than being applied

Key Technical Points:

  • CSS styling should be added to base.css file (at the bottom), not inline in the header
  • A later contributor suggests adding Font Awesome CDN link in layout/theme.liquid within the <head> section
  • HTML for icon links goes in sections/header.liquid

Current Status:
The discussion remains unresolved. The original poster confirms following instructions but icons still don’t display correctly. Another user asks if the issue was ever figured out, indicating this is a common problem without a clear resolution in the thread.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

I would like to add social media icons to my header, left alined (next to the search). I am using th DAWN theme. please can anyone help?

1 Like
2

Share your store

3

https://dreami-boutique-7129.myshopify.com/

4

Hi Crebecca,

To add social media icons to the header,

you’ll need to customize your theme’s code.

Here’s a step-by-step guide:

  • Access Your Shopify Admin
  • Go to Theme Editor
  • Edit Code(Find the Dawn theme you’re currently using and click on the “Actions” button, then select “Edit code”.)
  • Locate the Header Section( file named header.liquid or theme.liquid.)
  • Add Social Media Icons HTML

    [](https://facebook.com/yourpage)
    [](https://twitter.com/yourpage)
    [](https://instagram.com/yourpage)

Replace “https://facebook.com/yourpage”, “https://twitter.com/yourpage”, and “https://instagram.com/yourpage” with the actual URLs of your social media profiles.

Style Social Media Icons

/* Style social media icons */
.social-icons {
    display: flex;
    align-items: center;
}

.social-icons a {
    margin-right: 10px;
    color: #333; /* Adjust color as needed */
}

/* Adjust icon size if necessary */
.social-icons a i {
    font-size: 20px;
}

Save Changes

5

Thank you for your response.

Where in the header liquid do i add the code - at the end?

Also where do i add the style social media icons code, in the same header liquid or somewhere else?

Thanks

6

Yes, the code add in the end

Add the style code, in the base.css file

7

Thank you.

I’ve added the code but the icons aren’t appearing and the style code is shown on the live site.

Any idea what I’ve done wrong?

Screenshot 2024-03-07 at 13.54.46.png
Screenshot 2024-03-07 at 13.54.46.png2916Ă—1478 478 KB

Screenshot 2024-03-07 at 13.54.38.png
Screenshot 2024-03-07 at 13.54.38.png2704Ă—448 52.8 KB

8

Please add the style code(in the bottom) in the base.css file

9

ok done - i still can’t see the icons anywhere though

10

Did you ever figure this out?

11

Put this snippet in the layout/theme.liquid file. Place this whole section inside the section. I just placed it right at the top of the file.

.social-icons { display: flex; gap: 10px; /* Space between icons */ } .social-icons a { color: #000; /* Icon color */ font-size: 34px; /* Icon size */ text-decoration: none; /* Remove underline */ } .social-icons a:hover { color: #0073e6; /* Icon color on hover */ }

The other coding snippet (placing the links for your social media accounts) goes into the sections/header.liquid. This is another file in your theme settings.