HTML CHARACTER ENTITIES: USEFUL MORE THAN YOU THINK

#codenewbie #100daysofcode #css #html

HTML character entities are texts, usually, a mixture of symbols used to display reserved characters, including emojis, in HTML. They begin with an ampersand (&) and end with a semicolon (;). The most widely used HTML entity on the web is the copyright symbol (©, coded ©, ©, and &COPY; ) found on a lot of websites footer, including my own portfolio.

Almost everybody seems not to notice these special characters are not for displaying the copyright symbol and random emojis alone. One other thing I find useful about them is making logos for websites. And sometimes, you might not need an icon library for your project at all as there is a code for almost every symbol, if not all actually.

Some HTML character entities include:

&#x00024; – Dollar
@ – asterisk
£ – pound
> – greater than
< – lesser than
&#x0002B – plus
☎ – telephone
♥ – Dark hearts
☆ – star
♀ – female
♂ – male
♪ – sung
♦ – diamond
✶ – sext
♠ – spade

You can find a lot of other HTML entities in the official list of character entities here and here.

In the code snippets below, I tried to craft a logo for a mystery soccer club with HTML character entities and CSS positioning:

    <div class="container">
        <span>
        <div class="lion">
            &#129409;
        </div>
        <div class="crown">
            &#128081;
        </div>
        <div class="ball1">
            &#9917;
        </div>
        <div class="ball2">
            &#9917;
        </div>
        <div class="text">
            <h4>KINGS FC</h4>
        </div>
        </span>
    </div>

/* The CSS */
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

div {
  display: inline;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

span {
  border: 20px outset orange;
  border-radius: 9px;
}

.lion,
.ball1,
.ball2,
.text {
  font-size: 30px;
}

.lion {
  position: relative;
  top: 40px;
  left: 78px;
}

.crown {
  position: relative;
  top: 10px;
  left: 26px;
  font-size: 35px;
}

.ball1 {
  position: relative;
  top: 68px;
  left: -2px;
}

.ball2 {
  position: relative;
  top: 69px;
  left: -100px;
}

.text {
  position: relative;
  top: 30px;
  left: 25px;
  color: orange;
}