Белые и черные шахматные фигуры - PullRequest
Новая
       5

Белые и черные шахматные фигуры

0 голосов
/ 07 мая 2018

Следующее работает, когда я использую Pro версию шрифта потрясающе, но мне интересно, если я упустил что-то очевидное.

Я решил использовать 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 голосов
/ 07 мая 2018

Чтобы заставить его работать с бесплатной версией шрифта. Удивительно: добавьте «белый» класс к родительскому (перетаскиваемый контейнер) и измените far на fas: Как отметил Крис Форренс: я бы предложил изменить «fa» на «fas» (поскольку «fa» устарела) 

.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
}
<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="fas fa-chess-rook"></i>
				</div>
			</div>
			<div class="top col-1 bg-dark">
				<div class="draggable">
					<i class="fas fa-chess-knight"></i>
				</div>
			</div>
			<div class="top col-1">
				<div class="draggable">
					<i class="fas fa-chess-bishop"></i>
				</div>
			</div>
			<div class="top col-1 bg-dark">
				<div class="draggable">
					<i class="fas fa-chess-queen"></i>
				</div>
			</div>
			<div class="top col-1">
				<div class="draggable">
					<i class="fas fa-chess-king"></i>
				</div>
			</div>
			<div class="top col-1 bg-dark">
				<div class="draggable">
					<i class="fas fa-chess-bishop"></i>
				</div>
			</div>
			<div class="top col-1">
				<div class="draggable">
					<i class="fas fa-chess-knight"></i>
				</div>
			</div>
			<div class="top col-1 bg-dark">
				<div class="draggable">
					<i class="fas 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="fas fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable">
					<i class="fas fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable">
					<i class="fas fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable">
					<i class="fas fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable">
					<i class="fas fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable">
					<i class="fas fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable">
					<i class="fas fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable">
					<i class="fas 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 white">
					<i class="fas fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable white">
					<i class="fas fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable white">
					<i class="fas fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable white">
					<i class="fas fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable white">
					<i class="fas fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable white">
					<i class="fas fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable white">
					<i class="fas fa-chess-pawn"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable white">
					<i class="fas 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 white">
					<i class="fas fa-chess-rook"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable white">
					<i class="fas fa-chess-knight"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable white">
					<i class="fas fa-chess-bishop"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable white">
					<i class="fas fa-chess-queen"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable white">
					<i class="fas fa-chess-king"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable white">
					<i class="fas fa-chess-bishop"></i>
				</div>
			</div>
			<div class="col-1 bg-dark">
				<div class="draggable white">
					<i class="fas fa-chess-knight"></i>
				</div>
			</div>
			<div class="col-1">
				<div class="draggable white">
					<i class="fas 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>
...