Twitter Bootstrap Question posted in

Twitter bootstrap – Increase the sizes of Unicode Character 'BULLET OPERATOR' (U+2219)

I am trying to increase the sizes of the bullet operator using font-sizebut it turned out that it is becoming square-ish instead of circle.

Can anyone suggest:

  1. Why is it happened? Is it possible to increase the sizes of unicode character while maintaining the shape?

I replicate the problem with the following snippets:

.first {
  width:30%;
  min-height: 40px;
  background-color: grey;
  text-align: center;
}

.first:after {
  content: "2219"; 
  font-size:70px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  
  
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="first">
          
          <p>This is test</p>
          
        </div>
      </div>
    </div>
  </div>

</body>
</html>
Tags:

2

Answers


  1. 0

    The character you may be looking for is

    .first::after {
    content: "2022";
}

    Look in the hex column, this looks like a useful reference site.

    http://www.ascii.cl/htmlcodes.htm

    Login or Signup to reply.
  2. 0

    the type of font can also affect this character..to illustrate ,I use monospace font and got a rounded circle

    snippet here

    .first {
  width:30%;
  min-height: 40px;
  background-color: grey;
  text-align: center;
}

.first:after {
  font-family:monospace;
  content: "2219"; 
  font-size:70px;
  border-radius:5px;
}
    <script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  
  
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="first">
          
          <p>This is test</p>
          
        </div>
      </div>
    </div>
  </div>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search