Lehigh Clutch Style Guide

Social Icons 

<a href="https://www.tiktok.com/@lehighadmissions" class="social-icon tiktok" title="tiktok"><span class="sr-only">Find us on tiktok</span></a>
 
{% set type="" %}

{% if 'instagram.com' in social_url|render|lower %}
{% set type="instagram" %}
{% endif %}

{% if 'facebook.com' in social_url|render|lower %}
{% set type="facebook" %}
{% endif %}

{% if 'twitter.com' in social_url|render|lower %}
{% set type="twitter" %}
{% endif %}

{% if 'youtube.com' in social_url|render|lower %}
{% set type="youtube" %}
{% endif %}

{% if 'snapchat.com' in social_url|render|lower %}
{% set type="snapchat" %}
{% endif %}

{% if 'tumblr.com' in social_url|render|lower %}
{% set type="tumblr" %}
{% endif %}

{% if 'linkedin.com' in social_url|render|lower %}
{% set type="linkedin" %}
{% endif %}

{% if 'flickr.com' in social_url|render|lower %}
{% set type="flickr" %}
{% endif %}

{% if 'tiktok.com' in social_url|render|lower %}
{% set type="tiktok" %}
{% endif %}

<a href="{{ social_url }}" class="social-icon {{ type }}" title="{{ type }}"><span class="sr-only">Find us on {{ type }}</span></a>
 
{
  "social_url": "https://www.tiktok.com/@lehighadmissions",
  "social_text": "instagram"
}
  • Content: 
    .social-icon {
  color: unset;
  border-bottom: 0 !important;

  .color-scheme-dark & {
    border-bottom: 0 !important;
  }

  &::before {
    @include font-awesome-brand;
    color: $lehigh_brown;
    color: var(--lehigh_brown, $lehigh_brown);
    font-size: 2rem;
    @include transition;

    .color-scheme-dark & {
      color: $lehigh_brown_darkmode;
      color: var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
    }
  }

  &:hover {
    &::before {
      color: $accent_color;
    }
  }

  &.instagram {
    &::before {
      content: "\f16d";
    }
  }

  &.facebook {
    &::before {
      content: "\f39e";
    }
  }

  &.twitter {
    &::before {
      content: "\f099";
    }
  }

  &.youtube {
    &::before {
      content: "\f167";
    }
  }

  &.snapchat {
    &::before {
      content: "\f2ac";
    }
  }

  &.tumblr {
    &::before {
      content: "\f173";
    }
  }

  &.linkedin {
    &::before {
      content: "\f08c";
    }
  }

  &.flickr {
    &::before {
      content: "\f16e";
    }
  }

  &.tiktok {
    &::before {
      content: "\e07b";
    }
  }
}
  • URL: /components/raw/social_icon/social_icon.scss
  • Filesystem Path: bits/03-pieces/_social_icon/social_icon.scss
  • Size: 1.1 KB

No notes defined.