JSFiddle - React, Tailwind, and code Playground

JIT Broadcast Help

by Meredith Crow

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/themes/ui-dialog/ui.themeroller.theme.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/jquery-ui.structure.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/bootstrap.css">

					<p><strong>Custom Icon Fonts 2x</strong></p>
			<div class="row">
				  <div class="col-xs-3 col-sm-3 col-md-1">
          				<p><i class="fa fa-fw fa-2x fa-custom ui-icon-files"></i></p>
        			</div>
					<div class="col-xs-3 col-sm-3 col-md-1">
					<p><i class="fa fa-fw fa-2x fa-custom ui-icon-event"></i></p>
				</div>
						<div class="col-xs-3 col-sm-3 col-md-1">
					<p><i class="fa fa-fw fa-2x fa-custom ui-icon-link"></i></p>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-1">
					<p><i class="fa fa-fw fa-2x fa-custom ui-icon-webpage"></i></p>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-1">
					<p><i class="fa fa-fw fa-2x fa-custom ui-icon-yakabox"></i></p>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-1">
					<p><i class="fa fa-fw fa-2x fa-custom ui-icon-map"></i></p>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-1">
					<p><i class="fa fa-fw fa-2x fa-custom ui-icon-fingerprint"></i></p>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-1">
					<p><i class="fa fa-fw fa-2x fa-custom ui-icon-node"></i></p>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-1">
					<p><i class="fa fa-fw fa-2x fa-custom ui-icon-network"></i></p>
				</div>
				<div...

SCSS

@font-face {
  font-family: 'font-yexcellent';
  src: url("http://rind.yakabod.net/viewvc/vne/html/fonts/font-yexcellent.eot"),
   url("http://rind.yakabod.net/viewvc/vne/html/fonts/font-yexcellent.svg"),
    url("http://rind.yakabod.net/viewvc/vne/html/fonts/font-yexcellent.woff),
    url("http://rind.yakabod.net/viewvc/vne/html/fonts/font-yexcellent.tff");
  font-weight: normal;
  font-style: normal;
}

.fa-custom {
	font-family: 'font-yexcellent', sans-serif;
	vertical-align: inherit;

&.ui-icon-blog: before {
  content: "\e900";
}

&.ui-icon-dashboard: before {
  content: "\e901";
}

&.ui-icon-diagram: before {
  content: "\e902";
}

&.ui-icon-event: before {
  content: "\e903";
}

&.ui-icon-files: before {
  content: "\e904";
}

&.ui-icon-fingerprint: before {
  content: "\e905";
}

&.ui-icon-iftty: before {
  content: "\e906";
}

&.ui-icon-import: before {
  content: "\e907";
}

&.ui-icon-link: before {
  content: "\e908";
}

&.ui-icon-map: before {
  content: "\e909";
}

&.ui-icon-message: before {
  content: "\e90a";
}

&.ui-icon-network: before {
  content: "\e90b";
}

&.ui-icon-node: before {
  content: "\e90c";
}

&.ui-icon-playbook: before {
  content: "\e90d";
}

&.ui-icon-sheet: before {
  content: "\e90e";
}

&.ui-icon-task: before {
  content: "\e90f";
}

&.ui-icon-tunnel: before {
  content: "\e910";
}

&.ui-icon-webpage: before {
  content: "\e911";
}

&.ui-icon-workflow: before {
  content: "\e912";
}

&.ui-icon-yakabox: before {
  content: "\e913";
}
}