html - Icon Fonts Not Vertically Centered With Text -


I am using icon fonts in a nav list and I have text in two The icon problem is that the mouse and the text do not match well. The icon area is apparently more than the text, when they are both on the baseline, the icons are too much, is there any solution i span Can I use text in ? I tried to adjust every parameter that I know:

HTML:

  & lt; Nav class = "nav" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; Span data-icon = "& # xE603;" & Gt; & Lt; / Span & gt; & Lt; H2 & gt; Home & lt; / H2 & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; P & gt; ICON font FTW & lt; / P & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Span data-icon = "& # xE603;" & Gt; & Lt; / Span & gt; & Lt; H2 & gt; ABOUT & lt; / H2 & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Span data-mark = "& amp; # xE603;" & Gt; & Lt; / Span & gt; & Lt; H2 & gt; Contact & lt; / H2 & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt;   

CSS:

  nav {font-size: 1.2im; Background: Gray; Text align: center; } Nav li: First-child {display: inline-block; } Nav li {display: inline-block; }   

Enter image details here

I would say that we need to reset the style first because we have the tag here ( h2 , P ).

CSS: nav {font-size: 1.2em;

Background: Gray; Text align: center; Padding: 0; Margin: 0; } Nav li: First-child {display: inline-block; } Navy Lee (Status: Relative; Display: Inline-block; Vertical-align: medium; } Nav h2, nav div {status: relative; Display: inline-block; Height: 100%; Width: 100%; Padding: 0; Margin: 20 px auto; HTML: changed the bit to see the icons in the belt.

  & lt; Nav class = " ne" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; Span data-icon = "& # xE603;" & Gt; & Lt; / Span & gt; & Lt; H2 & gt; & Amp; # XE603; & Lt; / H2 & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Div & gt; ICON font FTW & lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Span data-icon = "& # xE603;" & Gt; & Lt; / Span & gt; & Lt; H2 & gt; & Amp; # XE603; & Lt; / H2 & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Span data-icon = "& # xE603;" & Gt; & Lt; / Span & gt; & Lt; H2 & gt; & Amp; # XE603; & Lt; / H2 & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt;   

Please check me, I get good results.

Comments

Popular posts from this blog

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

Matlab transpose a table vector -

c# - Textbox not clickable but editable -