how to properly include icons in the announcement bar CSS?

I've been trying to follow some tutorials on how to add images to the announcement bar so I can place a phone and mail icons however I found that the icons do not keep their size and when switching to the mobile view it becomes very small and places itself distant from the text; I've no experience at all with code 😅 this is what I have at the moment, any help would be amazing 🙂 Thank you!

https://www.narakury.com
ps: the password to enter the website is 123

Quote

.sqs-announcement-bar:before {
  content:"";
  background-image: url(https://static1.squarespace.com/static/649d26c0f9f0f25c9e456df9/t/64ad68f6216e96626c728b7e/1689086198121/tele.png);
  
  background-repeat: no-repeat;
   background-size: 100%100%!important;
  padding: 0.1vw;
  padding-inline: 0.1vw;
  float: left;
  margin-top: 0.3vw;
  margin-left: 2vw;
  width: 2vw;
  height: 2vw;
  
}
.sqs-announcement-bar-text {margin-right: 1vw;
height: 1.5vw
}

The size looks fine to me.

You want all text icon on same line?

Oh, after a while I gave up and resorted to copy paste the phone/mail emojis. 😅 what I was trying to achieve was using a custom image for the phone/mail however the image in question couldn't keep the size so it made the announcement bar to enlarge or the image would become very small were you could barely see it.

I added the phone Icon back into the announcement bar so you can see! thank you for looking into it! 🙂

Hi @Tuanphan

I am trying to add font awesome social icons to the announcement bar. I tried using the code from this post and adding the <i> code for font awesome inside the content:""; area but the html wasn't processed. What would be the best way to do this?

Link to site: www.centerforcommunication.com

Thanks!

Seth

On 7/19/2023 at 10:42 PM, sethhoffman said:

Hi @Tuanphan

I am trying to add font awesome social icons to the announcement bar. I tried using the code from this post and adding the <i> code for font awesome inside the content:""; area but the html wasn't processed. What would be the best way to do this?

Link to site: www.centerforcommunication.com

Thanks!

Seth

The site url doesn't work. Can you check it again?

Two ways to add FA icon

First is use i code on Markdown Block or Code Block. You can't use it in content: ""

Two is use FA Unicode code into content: "", something like this content: "\f073"; however you need to declare font-family. Each FA version will have a different font-family - To find Unicode code, click icon on FA website 

Thank you!

On 8/9/2023 at 10:37 PM, sethhoffman said:

Thank you!

Did you solve it? or still need help? I can write a quick guide?

Hello, I am having a similar issue: I'm trying to make an announcement bar with text and an image. Everything looks fine when I'm editing in desktop and mobile "mode" from my computer; but when I actually check the site on my phone, only the text is there, not the image. Here is my code: 

//drop shadow
.sqs-announcement-bar {  box-shadow: 1px 4px 6px rgba(0,0,0,0.2)
}

//adjust placement of text
.sqs-announcement-bar-text-inner {transform:translatey(1rem)}

//To restyle the content layout
.sqs-announcement-bar-text {
  align-items: center;
  display: flex;
  justify-content: center;
}

//To add the image
.sqs-announcement-bar-text::after {
  background-image: url(https://static1.squarespace.com/static/65a48cc392341f0580fa7a29/t/65b4422b6353c24c44327e73/1706312238496/Docs+Face+%26+Real+Flames--NEW+-+9-20-17.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  content: '';
  display: block;
  height: 70px;
  width: 350px;
}

//ADJUSTING FOR MOBILE
 @media only screen and(max-width: 767px)
 {
.sqs-announcement-bar-text:before{
margin-left: 30vw;
margin-bottom: 6rem;
   }
//text above image in mobile
.sqs-announcement-bar-text::after {
  background-image: url(https://static1.squarespace.com/static/65a48cc392341f0580fa7a29/t/65b4422b6353c24c44327e73/1706312238496/Docs+Face+%26+Real+Flames--NEW+-+9-20-17.png) ;
background-size: contain;
  content: '';
width:500px ;
   margin-top: 10px}
.sqs-announcement-bar-text {
  align-items: center;
  display: grid;
  justify-content: center;
   }}
/

On 3/23/2024 at 10:37 AM, ZuchinniCosette said:

Hello, I am having a similar issue: I'm trying to make an announcement bar with text and an image. Everything looks fine when I'm editing in desktop and mobile "mode" from my computer; but when I actually check the site on my phone, only the text is there, not the image. Here is my code: 

//drop shadow
.sqs-announcement-bar {  box-shadow: 1px 4px 6px rgba(0,0,0,0.2)
}

//adjust placement of text
.sqs-announcement-bar-text-inner {transform:translatey(1rem)}

//To restyle the content layout
.sqs-announcement-bar-text {
  align-items: center;
  display: flex;
  justify-content: center;
}

//To add the image
.sqs-announcement-bar-text::after {
  background-image: url(https://static1.squarespace.com/static/65a48cc392341f0580fa7a29/t/65b4422b6353c24c44327e73/1706312238496/Docs+Face+%26+Real+Flames--NEW+-+9-20-17.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  content: '';
  display: block;
  height: 70px;
  width: 350px;
}

//ADJUSTING FOR MOBILE
 @media only screen and(max-width: 767px)
 {
.sqs-announcement-bar-text:before{
margin-left: 30vw;
margin-bottom: 6rem;
   }
//text above image in mobile
.sqs-announcement-bar-text::after {
  background-image: url(https://static1.squarespace.com/static/65a48cc392341f0580fa7a29/t/65b4422b6353c24c44327e73/1706312238496/Docs+Face+%26+Real+Flames--NEW+-+9-20-17.png) ;
background-size: contain;
  content: '';
width:500px ;
   margin-top: 10px}
.sqs-announcement-bar-text {
  align-items: center;
  display: grid;
  justify-content: center;
   }}
/

 

 

Try remove this symbol

Hi @tuanphan

I was hoping you could help me with this please - I've managed to style the announcement bar and add one icon (telephone) before the telephone number in my announcement bar but I'm unsure how to add a second icon (email) to be positioned just before the email address. 

• URL: https://demaids.squarespace.com/
• PW: dm123

Here's the CSS I've used:
 

.sqs-announcement-bar {
  background-color: #F7EEE5 !important;
}

.sqs-announcement-bar-text {
  font-size: 0.7rem;
  margin-right: 1.5vw;
  align-items: center;
  display: flex;
  justify-content: right;
}


.sqs-announcement-bar-text:before {
  background-image: url(https://static1.squarespace.com/static/65dca22fa73132061fe6eedf/t/66bb4a82bc275f65f7449643/1723550338169/de-maids-solicitors-contact-us1.png);
  background-position: left;
  background-repeat: no-repeat;
  background-size: 70%;
  content: '';
  display: block;
  height: 23px;
  width: 23px;
}

.sqs-announcement-bar-close {
      display: none
}

Thanks! 🙂 

On 8/13/2024 at 7:22 PM, luciedemaid said:

Hi @tuanphan

 

I was hoping you could help me with this please - I've managed to style the announcement bar and add one icon (telephone) before the telephone number in my announcement bar but I'm unsure how to add a second icon (email) to be positioned just before the email address. 

• URL: https://demaids.squarespace.com/
• PW: dm123

 

Here's the CSS I've used:
 

.sqs-announcement-bar {
  background-color: #F7EEE5 !important;
}

.sqs-announcement-bar-text {
  font-size: 0.7rem;
  margin-right: 1.5vw;
  align-items: center;
  display: flex;
  justify-content: right;
}


.sqs-announcement-bar-text:before {
  background-image: url(https://static1.squarespace.com/static/65dca22fa73132061fe6eedf/t/66bb4a82bc275f65f7449643/1723550338169/de-maids-solicitors-contact-us1.png);
  background-position: left;
  background-repeat: no-repeat;
  background-size: 70%;
  content: '';
  display: block;
  height: 23px;
  width: 23px;
}

.sqs-announcement-bar-close {
      display: none
}

 

Thanks! 🙂 

 

You can see #3, #4, #5 to see how to use FontAwesome icon before Announcement Phone/Email text