/* Define the custom icon font */

  
@font-face {
    font-family: 'YourFont'; /* Name of your icon font */
    src: url('/assets/fonts/YourFont.eot'); /* IE9 Compat Modes */
    src: url('/assets/fonts/YourFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/assets/fonts/YourFont.woff2') format('woff2'), /* Super Modern Browsers */
         url('/assets/fonts/YourFont.woff') format('woff'), /* Modern Browsers */
         url('/assets/fonts/YourFont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/assets/fonts/YourFont.svg#YourFont') format('svg'); /* Legacy iOS */
  

  }

  .yf {
    font-family: 'YourFont' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    color: blueviolet;
  }
  
  /* Individual icon mappings */
  .yf-home:before {
    content: '\0910'; /* Unicode for the "home" icon */
  }
  .yf-settings:before {
    content: '\0921'; /* Unicode for the "home" icon */
  }
  .yf-settings-1:before {
    content: '\0922'; /* Unicode for the "home" icon */
  }
  .yf-quran:before {
    content: '\0901'; /* Unicode for the "home" icon */
  }
  .yf-trash:before {
    content: '\091F'; /* Unicode for the "home" icon */
  }
  .yf-masjid:before {
    content: '\0908'; /* Unicode for the "home" icon */
  }
  
  
  .yf-large {
    font-size: 36px; /* Larger size */
  }
  
  .icon-red {
    color: red; /* Red color */
  }
  
  @keyframes spin {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  .yf-spin {
    display: inline-block;
    font-size: 48px;
    animation: spin 2s infinite linear;
  }