CSS-only Accessible Map Pins with material icon snippet

Loading…

CSS-only Accessible Map Pins with material icon snippet | GoSnippets

Source Code

1<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.2/iconfont/material-icons.min.css'>
2<div class="pin-container">
3  <button class="pin pin__daycare">
4    <span class="material-icons" aria-hidden="true">
5      home
6    </span>
7    <span class="visually-hidden">Daycare</span>
8  </button>
9</div>
10
11<div class="pin-container">
12  <button class="pin pin__preschool">
13    <span class="material-icons" aria-hidden="true">
14      school
15    </span>
16    <span class="visually-hidden">Preschool</span>
17  </button>
18</div>
19
20<div class="pin-container">
21  <button class="pin pin__featured">
22    <span class="material-icons" aria-hidden="true">
23      star
24    </span>
25    <span class="visually-hidden">Featured</span>
26  </button>
27</div>
28
29<div class="pin-container">
30  <button class="pin pin__daycare-selected">
31    <span class="material-icons" aria-hidden="true">
32      home
33    </span>
34    <span class="visually-hidden">Daycare</span>
35  </button>
36</div>
37
38<div class="pin-container">
39  <button class="pin pin__preschool-selected">
40    <span class="material-icons" aria-hidden="true">
41      school
42    </span>
43    <span class="visually-hidden">Preschool</span>
44  </button>
45</div>
46
47<div class="pin-container">
48  <button class="pin pin__featured-selected">
49    <span class="material-icons" aria-hidden="true">
50      star
51    </span>
52    <span class="visually-hidden">Featured</span>
53  </button>
54</div>

CSS-only Accessible Map Pins with material icon snippet

Source Code

More Utilities snippets

Comments(0)