白色和黑色的棋子

时间：2018-05-07 14:48:21

标签： bootstrap-4 font-awesome

当我使用专业版的字体真棒时，以下作品，但我想知道我是否遗漏了一些明显的东西。

我决定将class="fa fa-chess-pawn"用于黑色碎片，将class="far fa-chess-pawn"用于白色碎片。

问：我错过了一些明显的东西吗？我应该用什么来区分白色和黑色的碎片？

.row {
	min-height:90px;
}
.col-1 {
	border-bottom:1px solid black;
	border-right:1px solid black;
}
.left {
	border-left:1px solid black;
}
.top {
	border-top:1px solid black;
}
.card-body {
	font-size:72px;
}
.gray {
	color:white
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
		<div class="row">
			<div class="col-2">
			</div>
			<div class="top col-1 left">
				<div class="draggable">
					<i class="fa fa-chess-rook"></i>
				</div>
			</div>
			<div class="top col-1 bg-dark">
				<div class="draggable">
					<i class="fa fa-chess-knight"></i>
				</div>
			</div>
			<div class="top col-1">
				<div class="draggable">
					<i class="fa fa-chess-bishop"></i>
				</div>
			</div>
			<div class="top col-1 bg-dark">
				<div class="draggable">
					<i class="fa fa-chess-queen"></i>
				</div>
			</div>
			<div class="top col-1">
				<div class="draggable">
					<i class="fa fa-chess-king"></i>
				</div>
			</div>
			<div class="top col-1 bg-dark">
				<div class="draggable">
					<i class="fa fa-chess-bishop"></i>
				</div>
			</div>
			<div class="top col-1">
				<div class="draggable">
					<i class="fa fa-chess-knight"></i>
				</div>
			</div>
			<div class="top col-1 bg-dark">
				<div class="draggable">
					<i class="fa fa-chess-rook"></i>
				</div>
			</div>
			<div class="col-2">
			</div>
		</div>
		<div class="row">
			<div class="col-2">
			</div>
			<div class="col-1 bg-dark left">
				<div class="draggable">
					<i class="fa fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable">
					<i class="fa fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable">
					<i class="fa fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable">
					<i class="fa fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable">
					<i class="fa fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable">
					<i class="fa fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable">
					<i class="fa fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable">
					<i class="fa fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-2">
			</div>
		</div>
		<div class="row">
			<div class="col-2">
			</div>
			<div class="col-1 left">
			</div>
			<div class="col-1 bg-dark">
			</div>
			<div class="col-1">
			</div>
			<div class="col-1 bg-dark">
			</div>
			<div class="col-1">
			</div>
			<div class="col-1 bg-dark">
			</div>
			<div class="col-1">
			</div>
			<div class="col-1 bg-dark">
			</div>
			<div class="col-2">
			</div>
		</div>
		<div class="row">
			<div class="col-2">
			</div>
			<div class="col-1 bg-dark left">
			</div>
			<div class="col-1">
			</div>
			<div class="col-1 bg-dark">
			</div>
			<div class="col-1">
			</div>
			<div class="col-1 bg-dark">
			</div>
			<div class="col-1">
			</div>
			<div class="col-1 bg-dark">
			</div>
			<div class="col-1">
			</div>
			<div class="col-2">
			</div>
		</div>
		<div class="row">
			<div class="col-2">
			</div>
			<div class="col-1 left">
			</div>
			<div class="col-1 bg-dark">
			</div>
			<div class="col-1">
			</div>
			<div class="col-1 bg-dark">
			</div>
			<div class="col-1">
			</div>
			<div class="col-1 bg-dark">
			</div>
			<div class="col-1">
			</div>
			<div class="col-1 bg-dark">
			</div>
			<div class="col-2">
			</div>
		</div>
		<div class="row">
			<div class="col-2">
			</div>
			<div class="col-1 bg-dark left">
			</div>
			<div class="col-1">
			</div>
			<div class="col-1 bg-dark">
			</div>
			<div class="col-1">
			</div>
			<div class="col-1 bg-dark">
			</div>
			<div class="col-1">
			</div>
			<div class="col-1 bg-dark">
			</div>
			<div class="col-1">
			</div>
			<div class="col-2">
			</div>
		</div>
		<div class="row">
			<div class="col-2">
			</div>
			<div class="col-1 left">
				<div class="draggable">
					<i class="far fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable">
					<i class="far fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable">
					<i class="far fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable">
					<i class="far fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable">
					<i class="far fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable">
					<i class="far fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable">
					<i class="far fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable">
					<i class="far fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-2">
			</div>
		</div>
		<div class="row">
			<div class="col-2">
			</div>
			<div class="col-1 bg-dark left">
				<div class="draggable">
					<i class="far fa-chess-rook"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable">
					<i class="far fa-chess-knight"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable">
					<i class="far fa-chess-bishop"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable">
					<i class="far fa-chess-queen"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable">
					<i class="far fa-chess-king"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable">
					<i class="far fa-chess-bishop"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable">
					<i class="far fa-chess-knight"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable">
					<i class="far fa-chess-rook"></i>
				</div>
			</div>
			<div class="col-2">
			</div>
		</div>
	</div>
</div>
<script defer src="https://use.fontawesome.com/releases/v5.0.12/js/all.js" integrity="sha384-Voup2lBiiyZYkRto2XWqbzxHXwzcm4A5RfdfG6466bu5LqjwwrjXCMBQBLMWh7qR" crossorigin="anonymous"></script>    
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

1 个答案:

答案 0 :(得分：2)

使其适用于免费版本的字体awesome：将“white”类添加到父级（可拖动容器）并将> SELECT SUM(value) FROM memory_value WHERE host='webserver' AND type_instance =~ /(free|used)/ AND time > NOW() -1m name: memory_value time sum ---- --- 1525708703989094507 1384349696 更改为far： 正如Chris Forrence所说：我建议将“fa”改为“fas”（因为“fa”已被弃用）

fas
.draggable.white {
    color: #fff;
}
.row {
	min-height:90px;
}
.col-1 {
	border-bottom:1px solid black;
	border-right:1px solid black;
}
.left {
	border-left:1px solid black;
}
.top {
	border-top:1px solid black;
}
.card-body {
	font-size:72px;
}
.gray {
	color:white
}

相关问题
最新问题