Social Media iconen toevoegen aan je WordPress navigatie balk

by . Posted on

Zoals je inmiddels wel weet is social media integratie van essentieel belang voor je website. Het is een manier om bekend te worden. Social media iconen in je navigatie balk zijn direct zichtbaar voor je bezoekers, en verhogen de kans om gedeeld te worden. Maar hoe krijg je nu social media iconen in je navigatie balk?

Methode 1: Via CSS

  1. Download de benodigde social media iconen in formaat 32x 32.
  2. Ga naar Appearance > Menus.
  3. Open het Screen Options paneel aan de rechter bovenzijde.
  4. Vink ‘CSS Classes’ aan.
  5. Voer custom CSS classes in het veld in.

social media knoppen menu

6. Voeg onderstaande codes toe aan je stylesheet om de iconen toe te voegen en uit te lijnen:

.social-icons
{
width: 45px;float: right !important;
padding: 0 !important;
height: 32px;
width: 32px;
margin-left: 10px !important;
}

.class-facebook, .class-facebook:hover
{
background: url(images/facebook.png) no-repeat right !important;
}

.class-twitter, .class-twitter:hover
{
background: url(images/twitter.png) no-repeat right !important;
}

.class-gplus, .class-plusone:hover
{
background: url(images/plusone.png) no-repeat right !important;
}

.social-icons a
{
opacity: 0;
}

Methode 2: Via de Menu Social Icons plugin 

Social media toevoegen aan je wordpress menu

1. Ga naar https://wordpress.org/plugins/menu-social-icons/ en download en installeer de plugin.

2. Ga naar Appearance > Menus en zoek het Links paneel.

Schermafbeelding 2015-05-10 om 22.46.05

3. Klik op het icoon dat je aan je navigatie balk wil toevoegen. Je zult zien dat de URL en link tekst automatisch gevuld worden.

Voeg het icoon toe aan het menu.

4 reacties op “Social Media iconen toevoegen aan je WordPress navigatie balk”

  1. Joost schreef:
    8 april 2017 om 19:39

    zelfde probleem als bovengenoemde:
    De link komt in de balk te staan maar er wordt geen icoontje weergegeven.
    Gecontroleerd of het icoontje dezelfde kleur als de achtergrond heeft maar dit is niet zo.
    Iemand een idee?

    Beantwoorden
  2. Jordan schreef:
    10 februari 2017 om 15:30

    Ik heb stap twee uitgevoerd. De link doet het wel, echter het icoontje is niet zichtbaar. Waarschijnlijk omdat deze dezelfde kleur heeft als de balk?

    Beantwoorden
  3. Maik Larooij schreef:
    23 februari 2016 om 11:16

    Ik heb bovenste stap uitgevoerd, de iconen zijn alleen niet zichtbaar. Hoe herstel ik dat? Ik kan wel op de balk aanklikken, zie alleen de logos niet.

    Beantwoorden

Geef een reactie