@font-face {
  font-family: "bootstrap-icons";
 
  src: url("fonts/bootstrap-icons.woff2") format("woff2"),
       url("fonts/bootstrap-icons.woff") format("woff");
  font-display: swap;  
  font-style: normal;
  font-weight: normal;
}

/* The Base Class */
.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* THE ICONS
   You can paste the full list from the official bootstrap-icons.css here.
   For now, here are the ones we used in your templates so far:
*/

.bi-check-circle-fill::before { content: "\f26a"; }
.bi-layers::before { content: "\f4bf"; }
.bi-shield-check::before { content: "\f52f"; }
.bi-lightning::before { content: "\f491"; }
.bi-signpost-split::before { content: "\f562"; }
.bi-shield-lock::before { content: "\f533"; }
.bi-file-earmark-text::before { content: "\f37e"; }
.bi-images::before { content: "\f429"; }
.bi-camera-fill::before { content: "\f226"; }
.bi-clock-fill::before { content: "\f292"; }
.bi-chat-square-text-fill::before { content: "\f265"; }
.bi-geo-alt-fill::before { content: "\f3e8"; }
.bi-envelope-fill::before { content: "\f32f"; }
.bi-telephone-fill::before { content: "\f5c1"; }
.bi-facebook::before { content: "\f344"; }
.bi-linkedin::before { content: "\f472"; }
.bi-instagram::before { content: "\f437"; }
.bi-zoom-in::before { content: "\f637"; }
.bi-map::before { content: "\f475"; }