Markers

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">&dollar;</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 -->
         &#127866;
     </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;
 }