Jump to content

How do you add your follower count next to social icons?

Recommended Posts

  • Replies 5
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

14 hours ago, AndrewFreedMusic said:

Site URL: https://www.bassfreedom.com

It would be a great addition for me to add my followers next to my social media icons (example attached). Any ideas? Thanks!

Screen Shot 2021-08-17 at 2.17.38 PM.png

Hi,

Icons in Header or?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

The CSS code

.header-display-desktop a[href*="tiktok"]:before {
    content: "50.1k";
    display: block;
    position: relative;
    top: 42px;
    font-size: 12px;
    color: white;
}
.header-display-desktop a[href*="facebook"]:after {
    content: "50.1k";
    display: block;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    text-align: center
}

Repeat for other social icons

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
On 8/21/2021 at 10:08 PM, tuanphan said:

The CSS code

.header-display-desktop a[href*="tiktok"]:before {
    content: "50.1k";
    display: block;
    position: relative;
    top: 42px;
    font-size: 12px;
    color: white;
}
.header-display-desktop a[href*="facebook"]:after {
    content: "50.1k";
    display: block;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    text-align: center
}

Repeat for other social icons

I tried using this code, but instead of displaying my follower count below my social icons, it's displaying right on top of them. I'm using a very similar code to replace my social icons to display I'm verified, and so they're all relatively uniform looking. I tried changing the file I use for the icon images and added the follower count below, but then the icons become too small to see even when XL on squarespace. Any advice? 
Here's my codes:
 

.sqs-svg-icon--wrapper[href*=tiktok] .sqs-svg-icon--social {
  display: none;
}
.sqs-svg-icon--list:hover .sqs-svg-icon--wrapper[href*=tiktok] {
  background: transparent;
}
.sqs-svg-icon--wrapper[href*=tiktok] {
  background: transparent;
}
.sqs-svg-icon--wrapper[href*=tiktok]:hover {
  background: transparent !important;;
}
.sqs-svg-icon--wrapper[href*=tiktok] > div {
  display: inline-block;
  background: url(https://static1.squarespace.com/static/60f50214bba3cc78be7f20ff/t/61608869f5bde62c05de0a63/1633716329879/Untitled+design+%2857%29.png) no-repeat;
  background-size: cover;
  width: 55%;
   height: 49% ;
  top: 22%;
  left: 15%;
  transform: translate(-50%, -50%)
}


.sqs-svg-icon--wrapper[href*="tiktok"]:before {
    content: "684.9k";
    display: block;
    position: relative;
    top: 10px;
    font-size: 12px;
    color: white;
}

Screen Shot 2021-11-09 at 12.15.01 PM.png

Edited by RoseMontoya
added photo
Link to comment
On 11/10/2021 at 3:14 AM, RoseMontoya said:

I tried using this code, but instead of displaying my follower count below my social icons, it's displaying right on top of them. I'm using a very similar code to replace my social icons to display I'm verified, and so they're all relatively uniform looking. I tried changing the file I use for the icon images and added the follower count below, but then the icons become too small to see even when XL on squarespace. Any advice? 
Here's my codes:
 

.sqs-svg-icon--wrapper[href*=tiktok] .sqs-svg-icon--social {
  display: none;
}
.sqs-svg-icon--list:hover .sqs-svg-icon--wrapper[href*=tiktok] {
  background: transparent;
}
.sqs-svg-icon--wrapper[href*=tiktok] {
  background: transparent;
}
.sqs-svg-icon--wrapper[href*=tiktok]:hover {
  background: transparent !important;;
}
.sqs-svg-icon--wrapper[href*=tiktok] > div {
  display: inline-block;
  background: url(https://static1.squarespace.com/static/60f50214bba3cc78be7f20ff/t/61608869f5bde62c05de0a63/1633716329879/Untitled+design+%2857%29.png) no-repeat;
  background-size: cover;
  width: 55%;
   height: 49% ;
  top: 22%;
  left: 15%;
  transform: translate(-50%, -50%)
}


.sqs-svg-icon--wrapper[href*="tiktok"]:before {
    content: "684.9k";
    display: block;
    position: relative;
    top: 10px;
    font-size: 12px;
    color: white;
}

Screen Shot 2021-11-09 at 12.15.01 PM.png

What is your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.