Voorbeelden van iconen

Je kunt op diverse plaatsen gebruik maken van iconen en /of font-afbeeldingen.

Om de iconen te kunnen gebruiken, kun je deze het beste eerst uploaden. SVG kan je eventueel ook rechtstreeks in de CSS opnemen, maar je CSS bestand wordt daar wel heel groot en onoverzichtelijk door.

Je kunt heel veel iconen gratis downloaden vanaf: svgrepo.com. Je kunt ze eerst resizen voordat je ze download, maak ze zo klein mogelijk.

Een banner met een icoon

Bovenaan deze pagina zie je een icoon voor de titel staan. Je kunt dit doen in de CSS met onderstaande code (het blok heeft de class 'banner-icon'):

section.banner-icon h1:before {
  content: url("https://postdropper-production.nl/fotos/file_10476364700463956.svg")  !important;
  position: relative;
  top:10px;
}

Titel met afwijkend icoon

Afwijkend icoon ingesteld op basis van de class van de sectie (koken).

CSS voor deze instelling:

section.koken .title:before {
   mask-image: url("https://postdropper-production.nl/fotos/file_10411217383399823.svg")  !important;
   -webkit-mask-image: url("https://postdropper-production.nl/fotos/file_10411217383399823.svg") !important;
}

Opsomming met afwijkend icoon

Afwijkend opsommingsteken ingesteld op basis van het ID van deze sectie

  • optie 1
  • optie 2
  • optie 3

CSS voor deze optie:

section.koken li::before { content: "😀"; }
section.koken li {padding-left: 30px; }

voorbeelden

Je kunt deze voorbeelden hier kopiëren en in je CSS plakken. Meer voorbeelden o.a. op: getemoji.com.

✢ ✣ ✤ ✥ ✦ ✧ ★ ☆ ✯ ✡︎ ✩ ✪ ✫ ✫ ✭ ✮ ✶
✷ ✵ ✸ ✹ → ⇒ ⟹ ⇨ ⇾ ➾ ⇢ ☛ ☞ ➔ ➜ ➙ ➛
➝ ➞ ♠︎ ♣︎ ♥︎ ♦︎ ♤ ♧ ♡ ♢ ♚ ♛ ♜ ♝ ♞ ♟ ♔

Eerste letter groter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget sapien ut orci molestie dignissim sit amet et magna. Praesent finibus, libero quis efficitur cursus, arcu nisi aliquam nibh, et blandit elit dolor sit amet magna. Nullam gravida lectus faucibus viverra cursus. Nunc imperdiet imperdiet metus, ac rutrum lorem vulputate non. Maecenas fermentum pulvinar lacus sodales semper. Integer eget rhoncus diam. Sed quis enim sed nisi cursus rutrum at sit amet augue. Proin a rutrum urna. Pellentesque aliquet sem dolor, ac ullamcorper purus aliquam sit amet. Sed id bibendum nibh, quis consectetur erat. Praesent sit amet diam dictum, pretium ipsum et, dictum risus. Quisque quis justo at nisl pharetra aliquet et gravida ligula.

Suspendisse at ante in purus fringilla dignissim eget eu est. Maecenas eget varius dui. Integer viverra feugiat sagittis. In varius purus a quam auctor, sit amet semper metus efficitur. Morbi lacinia metus sed nunc feugiat, quis semper sapien volutpat. Morbi commodo nunc vel massa euismod condimentum. Nam feugiat purus dui, sed consequat odio aliquet id. Sed sed congue est.

CSS voor dit effect:

section.eerste-letter .content p:first-of-type::first-letter {
   font-size: 200%;
   font-weight: bold;
   color: #8C4280;
}