Theme Debut: Add shipping ICON to Announcement bar.

[marcel9]

Hey Shopify Community,

I am trying to add a shipping icon to my announcement bar. I have tried to find anything helpful but wasn't successful.

https://fishermans24.myshopify.com

PW: ticrab

The announcement bar says "Free shipping" and I want a shipping icon next to it. 

What are the steps to take?

Thank you for your help

[Ninthony]

You can include Font Awesome on your theme for icons. Go into your theme.liquid in your Layouts folder in Online Store > Themes > Actions > Edit Code

Open the file and look for the closing head tag and place this before it:

<script src="https://kit.fontawesome.com/f7cf0a6419.js"></script>
//place this script above the closing head tag 
</head> // <---- This is the ending head tag

Then open your header.liquid file in your sections folder and ctrl + f for "announcement-bar__message". You should see this line:

<p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>

change that to this:

<p class="announcement-bar__message">{{ section.settings.message_text | escape }} <i class="fas fa-truck"></i></p>

Now there should be a little truck at the end of your message.

[RogueButton]

Hello friend, i use the minimal theme and i basically just want to remove all text and replace with the 3 icons. Person icon for account, basket and magnifying glass for search. This is my current lay out, how can i change this?

[marcel9]

Thank you! Worked just fine! 

Where can I find the other Icons of that font style? Would like to add cart icon as well

[Ninthony]

You can just search through font awesome. Here's the page with the truck:

https://fontawesome.com/icons/truck?style=solid

Just find the icon you like and you can place it anywhere on your site with the <i class=""></i> tags, and put the class that they provide you on the site in the class field.

[xbbyoc]

Thank you for this. It Worked for my debut theme. For those are are wondering the truck will be at the end. Im excited about this. wooot wooot !

[ericccccc]

Hi,

Your solution worked but now I am unable to change the text colour of the announcement bar message.

I have selected different colour in the header-announcement bar section but it is still black. 

I think it is because an icon has been added to the announcement bar.

Can you advise?

Thanks,

Eric

[Roy37]

Thanks for the solution.

I inserted that code into "announcement-bar.liquid" Section.  

My header has come out looking like this, with the truck icon sitting above the text. Any ideas? 

[made4Uo]

Hi @Roy37,

You will need to adjust the display css for this. Do you mind sharing your website so we can take a look?

[Melih11]

Hello Guys, i cant find this line in my header.liquid file

<p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>

 Can you help me out please?

Thank you in advance!