Google design icons als LI

Door Ellen Skapandi op 02-06-2016 12:34

2.281 views

Ik zit al een tijdje met een probleem.

Voor een website wil ik een "list" maken en wil daarvoor gebruik maken van Google Design Icons. In de gebruiksaanwijzing van Google Design staat de handmatige manier om de icon te plaatsen, maar ik wil dat icon graag als onderdeel van het LI-element. Dit werkt tot nu toe niet.

Ik heb gebruik gemaakt van li:before -> content, maar hier gebeurd niets mee. Het zou kunnen dat ik het verkeerd gebruikte.

Kan iemand me hiermee helpen, zodat ik hier op een goeie manier gebruik van kan maken?

Ward van der Put

02-06-2016 13:25


<style>
  ul.icons {
    list-style-type: none;
  }

  ul.icons li:before {
    font-family: "Material Icons";
    content: "bug_report";
    text-indent: -1.5em;
  }
</style>

Ellen Skapandi

06-06-2016 00:37 gewijzigd op 06-06-2016 00:40

iets vergelijkbaars had ik al gebruikt, toen werkte het niet en hier krijg ik helemaal niks uit.

Ozzie PHP

06-06-2016 00:44

>> Het zou kunnen dat ik het verkeerd gebruikte.

Dat zou zeker kunnen. Daarom is het denk ik handig als je even wat van je code laat zien. We hebben hier helaas geen glazen bol ;)

Ellen Skapandi

06-06-2016 01:04

Ik heb geen voorbeeld meer van wat ik eerder had, maar heb nu de code van Ward rechtstreeks gekopieerd,
<ul class="icons"> gebruikt en de stylesheet van Google in de functions van deze Wordpress-website neergezet met wp_enqueue_style( 'material-icons', '//fonts.googleapis.com/icon?family=Material+Icons' );

Ook nu krijg ik helemaal geen icon in de list.

Ozzie PHP

06-06-2016 01:15

>> maar heb nu de code van Ward rechtstreeks gekopieerd

Waar naartoe?

Ellen Skapandi

06-06-2016 01:21

In de stylesheet van mijn child-theme

Ozzie PHP

06-06-2016 01:26

Heb je een online-voorbeeld?

[size=xsmall]Toevoeging op 06/06/2016 02:06:37:[/size]

Voeg in je css dit toe (aan het eind):


.module ul.icons li:before {
    display: block;
}

Ellen Skapandi

06-06-2016 03:09

Nu krijg in inderdaad wel de icons te zien! dank je wel!
Nog 1 vraag: hoe laat ik de icon links van de tekst centreren, zonder dat het buiten de div valt waar de list in staat?

Ozzie PHP

06-06-2016 03:17

Ik denk dat je dit wilt ...


.module ul.icons li:before {
    display: block;
    float: left;
    margin-right: 3px;
}

En nu duik ik m'n bed in. Succes ermee ...

Ellen Skapandi

06-06-2016 03:23

Dan verdwijnen de icons weer, maar hij lijkt de tekst inderdaad naast de icon te zetten.

Weltrusten! Misschien voor mij ook wel slim

Reageren

Inloggen om te reageren