CODEWITHSUNDEEP
htmlcss
Mike.Whitehead
Mike.Whitehead

Reputation: 818

CSS - Styling a coded glyph

I need a heading with a plus(+) sign next to it for a client site. It needs to look like this -

heading with glyphic

I'm using the html code for glyphics - +. I've placed it within a span tag within a h1 tag like this - 

span {
  /* content: "\002B"; */
  padding-right: 25px;
  height: 75px;
  color: #4b0082;
}
<h1><span>&#43;</span>What we do</h1>

I can apply color and padding styling but not size. It needs to be much bigger, as in the example above. I have the heading at the top of a large container div. How can I apply sizing rules to the plus(+) sign?

Upvotes: 0

Views: 2221

Answers (5)

bhansa
bhansa

Reputation: 7514

Add font-weight and font-size to your glyph span

span {
  /* content: "\002B"; */
  color: #4b0082;
  font-weight:700;
  font-size:2em;
  vertical-align:sub;
}
<h1><span>&#43;</span>What we do</h1>

Upvotes: 1

Ashraful Karim Miraz
Ashraful Karim Miraz

Reputation: 725

I use &#x2795; (http://www.fileformat.info/info/unicode/char/2795/index.htm ) for heavy plus unicode sign.

the sign size as header font size. if h1 font size change the sign size will also response.

Please have a look at css in snippet.

span {
  padding-right: .3em;
  color: #4b0082;
  vertical-align: middle;
  font-size: 1.2em;
}
<h1><span>&#x2795;</span>What we do</h1>

Upvotes: 2

NeilWkz
NeilWkz

Reputation: 245

Instead on placing the &#43 in markup, I'd suggest that the symbol is purely decorative and doesn't need to be part of the DOM and would be better suited to being placed within a pseudo element.

   h1 {
   position:relative;
   padding-left:1.5em;
   
   }
   h1:before {
    content: "\002B";
    color: #4b0082;
    font-weight: 700;
    font-size: 2em;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-55%);
   
    }
 <h1>What We Do</h1>

Sizing the glyph with ems means that you can change the size of your H1 dependant on it's context.

Upvotes: 1

Granny
Granny

Reputation: 783

Adding a font-size will hopefully solve your problem. Looking at your current example I can see you already know how to properly align it. 

span {
  /* content: "\002B"; */
  padding-right: 25px;
  height: 75px;
  color: #4b0082;
  font-size: 55px;
}
<h1><span>&#43;</span>What we do</h1>

Upvotes: 4

Johannes
Johannes

Reputation: 67778

First, add a font-size to the span rule. Then, to align it properly, you can add position: relativeand a negative bottom setting:

span {
  /* content: "\002B"; */
  padding-right: 25px;
  height: 75px;
  color: #4b0082;
  font-size: 54px;
  bottom: -4px;
  position: relative;
}
<h1><span>&#43;</span>What we do</h1>

Upvotes: 2

Related Questions