Adding social media icons to my homepage

Beantwortet

7 Kommentare

  • Trapta
    Aktionen für Kommentare Permalink

    Hi Sarah Hartman,

    In order to do you need to edit below-listed files with the mentioned code:

    Step 1: Paste the below link in your document_head.hbs file:

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous" />

    Step 2: Paste the below code in your header.hbs file:

    <ul class="share">
    <li>
    <a class="pinterest" href="https://www.pinterest.ca/mayneinc/">
    <i class="fab fa-pinterest"></i>
    </a>
    </li>
    <li>
    <a class="instagram" href="https://www.instagram.com/Mayneproducts/">
    <i class="fab fa-instagram"></i>
    </a>
    </li>
    <li>
    <a class="facebook" href="https://www.facebook.com/gomayne">
    <i class="fab fa-facebook-f"></i>
    </a>
    </li>
    </ul>

    Step 3: Paste the below code in your style.css file:

    .header ul.share {
    margin-right: 15px;
    margin-bottom: 10px;
    margin-top: 0;
    justify-content: center;
    text-align: center;
    }

    .header ul.share.header ul.share > li {
    height: 25px;
    }

    .header .share a {
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    font-size: .9em;
    text-align: center;
    }

    .header .facebook {background-color: #3364A3;}
    .header .pinterest {background-color: #c92228;}
    .header .instagram {background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);}

    Let me know is this solves your issue.

    Thanks

    1
  • Sarah Hartman
    Aktionen für Kommentare Permalink

    That worked perfectly thank you!!

    0
  • Sarah Hartman
    Aktionen für Kommentare Permalink

    Is there any way to centre these three buttons?

    0
  • Trapta
    Aktionen für Kommentare Permalink

    @Sarah I have updated the code to align icons to center.

    Let me know if you will face any issue.

    Thanks

    0
  • Sarah Hartman
    Aktionen für Kommentare Permalink

    Unfortunately, it did not align to the center. No worries though they will be fine on the side I just thought it might look slightly better in the center.

    0
  • Trapta
    Aktionen für Kommentare Permalink

    @Sarah Hartman, try replacing:

    .header ul.share {
    margin-right: 15px;
    margin-bottom: 10px;
    margin-top: 0;
    justify-content: center;
    text-align: center;
    }

    with

    .header ul.share {
    margin-right: 15px;
    margin-bottom: 10px;
    margin-top: 0;
    justify-content: center;
    text-align: center;
    width: 100%;
    }

    Let me know if this solves your issue.

    Thanks

    0
  • Sarah Hartman
    Aktionen für Kommentare Permalink

    Unfortunately, still no luck. This is what I have on my style.css page

    but no worries it's not really an issue. I have grown to like the icons on the side!

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk