icon neben einem Tag steht über

strong97 · 6. Dezember 2015

Hey,

wie die Überschrift schon sagt. Hier ein Bild:

[Blockierte Grafik: http://img5.fotos-hochladen.net/uploads/losn36j1yfsr8.png]

Das Icon ist drüber, so ist es auch in der CSS geschrieben mit vertical-align:top ,

Nun wenn ich in meiner css: nav ul li a { vertical-align:top; } ebenso einsetze passiert nichts. Möchte es gerne in einer größe haben. Weiß einer vllt ne Lösung dafür?

mfg

MrMurphy · 6. Dezember 2015

Hallo,

ohne deinen Quelltext und das Beispiel zu kennen, auf das du dich beziehst ist keine Hilfe möglich. Außerdem geht aus deiner Frage nur ungefähr hervor, was du überhaupt erreichen möchtest.

Gruss

MrMurphy

strong97 · 6. Dezember 2015

Wie man im Bild sieht sind die Icons etwas noch oben verschoben. DIe sind nicht in einer Linie mit dem Text.

HTML

<nav class="navigation">
		<ul>
		<li><a href="#"><span class="genericon genericon-user"></span>Register</a></li>
		<li><a href="#"><span class="genericon genericon-lock"></span>Login</a></li>
		</ul>
		</nav>

Quelltext: Nav

CSS

header.main-header nav.navigation {
display:inline-block;
width:70%;
margin-left:-4px;
text-align:right;
}




header.main-header nav.navigation ul li{
display:inline-block;
list-style:none;
padding-left:15px;
padding-right:15px;
}




header.main-header nav.navigation ul li a {
  background: #FFFFFF;
  color: #696763;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 300;
  padding:0;
  text-decoration:none;
  vertical-align:top;
}

Alles anzeigen

Icon

CSS

.genericon {
	font-size: 16px;
	vertical-align: top;
	text-align: center;
	-moz-transition: color .1s ease-in 0;
	-webkit-transition: color .1s ease-in 0;
	display: inline-block;
	font-family: "Genericons";
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	line-height: 1;
	text-decoration: inherit;
	text-transform: none;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	speak: none;
}

Alles anzeigen

CSS

.genericon-user:before { content: "\f304"; }

icon neben einem Tag steht über

Jetzt mitmachen!

Teilen