how to put in text chess pieces in HTML
<html> <head> <meta charset="UTF-8"> <title>Chessboard using Pure CSS and HTML</title> <style type="text/css"> .chessboard { width: 640px; height: 640px; margin: 20px; border: 25px solid #333; } .black { float: left; width: 80px; height: 80px; background-color: #999; font-size:50px; text-align:center; display: table-cell; vertical-align:middle; } .white { float: left; width: 80px; height: 80px; background-color: #fff; font-size:50px; text-align:center; display: table-cell; vertical-align:middle; } </style> </head> <body> <div class="chessboard"> <!-- 1st --> <div class="white">♜</div> <div class="black">♞</div> <div class="white">♝</div> <div class="black">♛</div> <div class="white">♚</div> <div class="black">♝</div> <div class="white">♞</div> <div class="black">♜</div> <!-- 2nd --> <div class="black">♝</div> <div class="white">♝</div> <div class="black">♝</div> <div class="white">♝</div> <div class="black">♝</div> <div class="white">♝</div> <div class="black">♝</div> <div class="white">♝</div> <!-- 3th --> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <!-- 4st --> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <!-- 5th --> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <!-- 6th --> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <!-- 7th --> <div class="white">♙</div> <div class="black">♙</div> <div class="white">♙</div> <div class="black">♙</div> <div class="white">♙</div> <div class="black">♙</div> <div class="white">♙</div> <div class="black">♙</div> <!-- 8th --> <div class="black">♖</div> <div class="white">♘</div> <div class="black">♗</div> <div class="white">♕</div> <div class="black">♔</div> <div class="white">♗</div> <div class="black">♘</div> <div class="white">♖</div> </div> </body> </html>
Source: code2care.org