Google design icons als LI
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?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<style>
ul.icons {
list-style-type: none;
}
ul.icons li:before {
font-family: "Material Icons";
content: "bug_report";
text-indent: -1.5em;
}
</style>
ul.icons {
list-style-type: none;
}
ul.icons li:before {
font-family: "Material Icons";
content: "bug_report";
text-indent: -1.5em;
}
</style>
Gewijzigd op 06/06/2016 00:40:26 door Ellen Skapandi
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 ;)
<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.
Waar naartoe?
Toevoeging op 06/06/2016 02:06:37:
Voeg in je css dit toe (aan het eind):
Code (php)
1
2
3
2
3
.module ul.icons li:before {
display: block;
}
display: block;
}
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?
Code (php)
1
2
3
4
5
2
3
4
5
.module ul.icons li:before {
display: block;
float: left;
margin-right: 3px;
}
display: block;
float: left;
margin-right: 3px;
}
En nu duik ik m'n bed in. Succes ermee ...
Weltrusten! Misschien voor mij ook wel slim
Da's vreemd ... bij mij blijven de icoontjes gewoon staan. Misschien even je browsercache legen ...
En nu ga ik echt ;) ... trusten
Op de telefoon worden helemaal geen icons weergegeven
Gewijzigd op 06/06/2016 11:13:01 door Ellen Skapandi
Tip: http://www.w3schools.com/cssref/pr_list-style-image.asp