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

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!

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!

Hi,

Icons in Header or?

Hey there! Icons in the header!!

Or both...

Thank you!!

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

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;
}

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;
}

What is your site url?

Looking to do the same but on mobile and on this "unlinked" page: www.nyane.co/igbio-1

On 8/26/2024 at 3:56 PM, fhillm said:

Looking to do the same but on mobile and on this "unlinked" page: www.nyane.co/igbio-1

Use this code to Website Tools > Custom CSS

div#block-25144a4cc5f95259e6aa {
a.sqs-svg-icon--wrapper {
    overflow: visible !important;
}
a.sqs-svg-icon--wrapper:after {
    color: #fff;
    position: absolute;
    bottom: -20px;
    overflow: visible !important; 
}
a.sqs-svg-icon--wrapper[href*="instagram"]:after {
    content: "150";
}
a.sqs-svg-icon--wrapper[href*="TikTok"]:after {
    content: "300";
}
a.sqs-svg-icon--wrapper[href*="facebook"]:after {
    content: "100";
}
a.sqs-svg-icon--wrapper[href*="youtube"]:after {
    content: "600";
}
a.sqs-svg-icon--wrapper[href*="twitter"]:after {
    content: "30";
}}