html - Icon Fonts Not Vertically Centered With Text -
I am using icon fonts in a HTML: CSS: I would say that we need to reset the style first because we have the tag here ( CSS: 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. Please check me, I get good results. 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:
& 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;
nav {font-size: 1.2im; Background: Gray; Text align: center; } Nav li: First-child {display: inline-block; } Nav li {display: inline-block; }
h2 ,
P ).
nav {font-size: 1.2em;
& 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;
Comments
Post a Comment