Example
Markup
<!-- "Photo" Marker with Font Icon -->
<div class="waymark-marker waymark-marker-photo waymark-marker-circle waymark-marker-small">
<div class="waymark-marker-background" style="background:#70af00;"></div>
<i style="color:#ffffff;" class="waymark-marker-icon waymark-icon-icon ion ion-camera"></i>
</div>
<!-- "Bank" Marker with Text Icon -->
<div class="waymark-marker waymark-marker-bank waymark-marker-rectangle waymark-marker-large">
<div class="waymark-marker-background" style="background:#000;"></div>
<div style="color:#ffffff;" class="waymark-marker-icon waymark-icon-text">$</div>
</div>
<!-- "Beer" Marker with HTML Icon -->
<div class="waymark-marker waymark-marker-beer waymark-marker-marker waymark-marker-medium">
<div class="waymark-marker-background" style="background:#fbfbfb;"></div>
<div class="waymark-marker-icon waymark-icon-html">
<!-- HTML Input goes here -->
🍺
</div>
</div>
CSS
/* Adjust Ionic Icon size */
.waymark-marker .waymark-icon-icon.ion::before {
font-size: 18px !important;
}
/* Adjust Font Awesome Icon size */
.waymark-marker .waymark-icon-icon.fa::before {
font-size: 18px !important;
}
/* Adjust "Photo" Marker Icon size */
.waymark-marker-photo .waymark-icon-icon.ion::before {
font-size: 18px !important;
}
/* Add a border to all Circle Markers */
.waymark-marker-circle .waymark-marker-background {
border: 1px solid #000 !important;
}
/* Adjust Text Icon size */
.waymark-marker .waymark-icon-text {
font-size: 18px !important;
}
/* Adjust only "Photo" Marker Text Icon size */
.waymark-marker-photo .waymark-icon-text {
font-size: 18px !important;
}