Customize 字形图标（Glyphicons）

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Customize 字形图标（Glyphicons） - Runoops 自学教程</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link href="https://cdn.bootcss.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
	<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.9.2/themes/base/jquery-ui.css" />
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js"></script>
	<style>
		body {
			padding-top: 70px
		}

#red,
		#green,
		#blue {
			float: left;
			clear: left;
			width: 300px;
			margin: 15px;
		}

#swatch {
			width: 120px;
			height: 100px;
			margin-top: 18px;
			margin-left: 350px;
			background-image: none;
		}

#red .ui-slider-range {
			background: #ef2929;
		}

#red .ui-slider-handle {
			border-color: #ef2929;
		}

#green .ui-slider-range {
			background: #8ae234;
		}

#green .ui-slider-handle {
			border-color: #8ae234;
		}

#blue .ui-slider-range {
			background: #729fcf;
		}

#blue .ui-slider-handle {
			border-color: #729fcf;
		}

input {
			margin-top: 5px
		}

#code {
			background-color: #c6e4f0;
			padding: 7px
		}

.navbar-w3r {
			background: #4c4c4c;
			/* Old browsers */
			background: -moz-linear-gradient(top, #4c4c4c 5%, #595959 12%, #4c4c4c 18%, #2c2c2c 50%, #131313 100%);
			/* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #4c4c4c), color-stop(12%, #595959), color-stop(18%, #4c4c4c), color-stop(50%, #2c2c2c), color-stop(100%, #131313));
			/* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #4c4c4c 5%, #595959 12%, #4c4c4c 18%, #2c2c2c 50%, #131313 100%);
			/* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #4c4c4c 5%, #595959 12%, #4c4c4c 18%, #2c2c2c 50%, #131313 100%);
			/* Opera 11.10+ */
			background: -ms-linear-gradient(top, #4c4c4c 5%, #595959 12%, #4c4c4c 18%, #2c2c2c 50%, #131313 100%);
			/* IE10+ */
			background: linear-gradient(to bottom, #4c4c4c 5%, #595959 12%, #4c4c4c 18%, #2c2c2c 50%, #131313 100%);
			/* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0);
			/* IE6-9 */
		}
	</style>
	
	
	
</head>

<div class="container">
		<div class="row">
			<div class="col-lg-3">
				<h3>Font Size</h3>
				<div id="slider"></div>
				
			</div>
			<div class="col-lg-6">
				<h3>Color</h3>
				<div id="red"></div>
				<div id="green"></div>
				<div id="blue"></div>
				<div id="swatch" class="ui-widget-content ui-corner-all"></div>
			</div>
			<div class="col-lg-3">
				<h3>Text shadow</h3>
				<form class="form-inline" role="form">
					<div class="form-group">
						<label class="sr-only" for="offsetx">Offset X</label>
						<input type="text" class="form-control" id="offsetx" placeholder="Enter offset-x, e.g. 2">
					</div>
					<div class="form-group">
						<label class="sr-only" for="offsety">Offset Y</label>
						<input type="text" class="form-control" id="offsety" placeholder="Enter offset-y, e.g. 2">
					</div>
					<div class="form-group">
						<label class="sr-only" for="blur">Blur distance</label>
						<input type="text" class="form-control" id="blur" placeholder="Enter blur distance, e.g. 2">
					</div>
					<div style="width: 100%">
						Select color <input type="color" id="color" value="#000000" list="colors">
						<div class="alert alert-error" style="display:none;">input[type=color] is not available on your
							browser</div>
						<datalist id="colors">
							<option>#ff0000</option>
							<option>#0000ff</option>
							<option>#00ff00</option>
							<option>#ffff00</option>
							<option>#00ffff</option>
							<option>#f00</option>
							
							<option>red</option>
							
						</datalist>
					</div>
					<button type="button" class="btn btn-success" style="margin: 10px 0 10px 0"
						onclick="CreateShadow();">Generate Text Shadow</button>
				</form>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12">
				
				<table class="table table-bordered">
					<tr>
						<td> Asterik</td>
						<td> Plus</td>
						<td> Euro</td>
						<td> Envelope</td>
						<td> Pencil</td>
						<td> Glass</td>
					</tr>
					<tr>
						<td> Music</td>
						<td> Search</td>
						<td> Heart</td>
						<td> Star</td>
						<td> Empty</td>
						<td> User</td>
					</tr>
					<tr>
						<td> Film</td>
						<td> Th large</td>
						<td> Th</td>
						<td> List</td>
						<td> Okay</td>
						<td> Remove</td>
					</tr>
					<tr>
						<td> Zoom in</td>
						<td> Zoom out</td>
						<td> Off</td>
						<td> Signal</td>
						<td> Cog</td>
						<td> Trash</td>
					</tr>
					<tr>
						<td> Home</td>
						<td> File</td>
						<td> Time</td>
						<td> Road</td>
						<td> Download alt</td>
						<td> Download</td>
					</tr>
					<tr>
						<td> Upload</td>
						<td> Inbox</td>
						<td> Play circle</td>
						<td> Repeat</td>
						<td> Refresh</td>
						<td> List alt</td>
					</tr>
					<tr>
						<td> Lock</td>
						<td> Flag</td>
						<td> Headphones</td>
						<td> Volume-off</td>
						<td> Volume-down</td>
						<td> Volume-up</td>
					</tr>
					<tr>
						<td> Qrcode</td>
						<td> Barcode</td>
						<td> Tag</td>
						<td> Tags</td>
						<td> Book</td>
						<td> Bookmark</td>
					</tr>
					<tr>
						<td> Print</td>
						<td> Camera</td>
						<td> Font</td>
						<td> Bold</td>
						<td> Italic</td>
						<td> Text-height</td>
					</tr>
					<tr>
						<td> Text-width</td>
						<td> Align-left</td>
						<td> Align-center</td>
						<td> Align-right</td>
						<td> Align-justify</td>
						<td> List</td>
					</tr>
					<tr>
						<td> Indent-left</td>
						<td> Indent-right</td>
						<td> Facetime-video</td>
						<td> Picture</td>
						<td> Map-marker</td>
						<td> Adjust</td>
					</tr>
					<tr>
						<td> Tint</td>
						<td> Edit</td>
						<td> Share</td>
						<td> Check</td>
						<td> Move</td>
						<td> Step-backward</td>
					</tr>
					<tr>
						<td> Fast-backward</td>
						<td> Backward</td>
						<td> Play</td>
						<td> Pause</td>
						<td> Stop</td>
						<td> Forward</td>
					</tr>
					<tr>
						<td> Fast-forward</td>
						<td> Step-forward</td>
						<td> Eject</td>
						<td> Chevron-left</td>
						<td> Chevron-right</td>
						<td> Plus-sign</td>
					</tr>
					<tr>
						<td> Minus-sign</td>
						<td> Remove-sign</td>
						<td> Ok-sign</td>
						<td> Question-sign</td>
						<td> Info-sign</td>
						<td> Screenshot</td>
					</tr>
					<tr>
						<td> Remove-circle</td>
						<td> Ok-circle</td>
						<td> Ban-circle</td>
						<td> Arrow-left</td>
						<td> Arrow-right</td>
						<td> Arrow-up</td>
					</tr>
					<tr>
						<td> Arrow-down</td>
						<td> Share-alt</td>
						<td> Exclamation-sign</td>
						<td> Gift</td>
						<td> Leaf</td>
						<td> Fire</td>
					</tr>
					<tr>
						<td> Eye-open</td>
						<td> Eye-close</td>
						<td> Warning-sign</td>
						<td> Plane</td>
						<td> Calendar</td>
						<td> Random</td>
					</tr>
					<tr>
						<td> Comment</td>
						<td> Magnet</td>
						<td> Chevron-up</td>
						<td> Chevron-down</td>
						<td> Retweet</td>
						<td> Shopping-cart</td>
					</tr>
					<tr>
						<td> Folder-close</td>
						<td> Folder-open</td>
						<td> Resize-vertical</td>
						<td> Resize-horizontal</td>
						<td> Hdd</td>
						<td> Bullhorn</td>
					</tr>
					<tr>
						<td> Bell</td>
						<td> Certificate</td>
						<td> Thumbs-up</td>
						<td> Thumbs-down</td>
						<td> Hand-right</td>
						<td> Hand-left</td>
					</tr>
					<tr>
						<td> Hand-up</td>
						<td> Hand-down</td>
						<td> Circle-arrow-right</td>
						<td> Circle-arrow-left</td>
						<td> Circle-arrow-up</td>
						<td> Circle-arrow-down</td>
					</tr>
					<tr>
						<td> Globe</td>
						<td> Wrench</td>
						<td> Tasks</td>
						<td> Filter</td>
						<td> Briefcase</td>
						<td> glyphicon-fullscreen</td>
					</tr>
					<tr>
						<td> Dashboard</td>
						<td> Paperclip</td>
						<td> Heart-empty</td>
						<td> Link</td>
						<td> Phone</td>
						<td> Pushpin</td>
					</tr>
					<tr>
						<td> Usd</td>
						<td> GBP</td>
						<td> Sort</td>
						<td> Sort-by-alphabet</td>
						<td> Sort-by-alphabet-alt</td>
						<td> Sort-by-order</td>
					</tr>
					<tr>
						<td> Sort-by-order-alt</td>
						<td> Sort-by-attributes</td>
						<td> Sort-by-attributes-alt</td>
						<td> Unchecked</td>
						<td> Expand</td>
						<td> Collapse-down</td>
					</tr>
					<tr>
						<td> Collapse-up</td>
						<td> Log-in</td>
						<td> Flash</td>
						<td> Log-out</td>
						<td> New-window</td>
						<td> Record</td>
					</tr>
					<tr>
						<td> Save</td>
						<td> Open</td>
						<td> Saved</td>
						<td> Import</td>
						<td> Export</td>
						<td> Send</td>
					</tr>
					<tr>
						<td> Floppy-disk</td>
						<td> Floppy-saved</td>
						<td> Floppy-remove</td>
						<td> Floppy-save</td>
						<td> Floppy-open</td>
						<td> Credit-card</td>
					</tr>
					<tr>
						<td> Transfer</td>
						<td> Cutlery</td>
						<td> Header</td>
						<td> Compressed</td>
						<td> Earphone</td>
						<td> Phone-alt</td>
					</tr>
					<tr>
						<td> Tower</td>
						<td> Stats</td>
						<td> Sd-video</td>
						<td> Hd-video</td>
						<td> Subtitles</td>
						<td> Sound-stereo</td>
					</tr>
					<tr>
						<td> Sound-dolby</td>
						<td> Sound-dolby</td>
						<td> Sound-5-1</td>
						<td> Sound-6-1</td>
						<td> Sound-7-1</td>
						<td> Copyright-mark</td>
					</tr>

<tr>
						<td> Registration-mark</td>
						<td> Cloud-download</td>
						<td> Cloud-upload</td>
						<td> Tree-conifer</td>
						<td> Tree-deciduous</td>
						<td></td>
					</tr>

</table>
			</div>
		</div>
	</div>

<script src="https://cdn.bootcss.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	<script>
		//for changing font size
		$("#slider").slider(
			{
				value: 30,
				min: 0,
				max: 100,
				step: 1,
				slide: function (event, ui) {
					$("#slider-value").html(ui.value);
					var fs = $("#slider-value").html();
					$("td > span").css("font-size", fs + "px");
				}

}
		);
		// for changing color
		function hexFromRGB(r, g, b) {
			var hex = [
				r.toString(16),
				g.toString(16),
				b.toString(16)
			];
			$.each(hex, function (nr, val) {
				if (val.length === 1) {
					hex[nr] = "0" + val;
				}
			});
			return hex.join("").toUpperCase();
		}
		function refreshSwatch() {
			var red = $("#red").slider("value"),
				green = $("#green").slider("value"),
				blue = $("#blue").slider("value"),
				hex = hexFromRGB(red, green, blue);
			$("#swatch").css("background-color", "#" + hex);
			$("td > span").css("color", "#" + hex);
		}
		$(function () {
			$("#red, #green, #blue").slider({
				orientation: "horizontal",
				range: "min",
				max: 255,
				value: 127,
				slide: refreshSwatch,
				change: refreshSwatch
			});
			$("#red").slider("value", 255);
			$("#green").slider("value", 140);
			$("#blue").slider("value", 60);
		});

</script>

</body>

</html>