0
Ich habe eine Kopfzeile auf meiner Seite und es gibt eine Box mit einem Login-Bild und Ihrem Website-Kontostand. Aber ich versuche, ein Dropdown-Menü mit Optionen hinzuzufügen, aber aus irgendeinem Grund erscheint mein Font Awesome-Symbol unter dem Textfeld. Im Grunde möchte ich nur verstehen, warum mein Font Awesome-Icon unter meinem Textfeld erscheint. Irgendeine Hilfe?Font Awesome Icon erscheint unter Textfeld
JSFiddle: https://jsfiddle.net/nxt4Lzch/
<head>
<!--Script Links-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/loading.js"></script>
<!--Stylesheet Links-->
<link rel="stylesheet" text="text/css" href="css/dropdown.css">
<link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">
<!--Font Links-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<!--Website Header-->
<div id="header">
<div class="steam-box">
<div class="steam-info">
<img class="steam-avatar" src="<?=$steamprofile['avatar'];?>">
<div class="balance-box">
<i class="fa fa-database">
<span class="balance-amount">$201.50</span>
</i>
</div>
<div class="steam-dropdown">
<a href="#"><i class="fa fa-chevron-down"></i></a>
</div>
</div>
</div>
</div>
<!--Website Sidebar-->
<div id="sidebar-menu">
<ul>
<li><a href="#"><i class=""></i></a></li>
<li><a href="#"><i class="fa fa-area-chart"></i></a></li>
<li><a href="#"><i class="fa fa-life-ring"></i></a></li>
<li><a href="#"><i class="fa fa-cart-arrow-down"></i></a></li>
<li><a href="#"><i class="fa fa-shopping-basket"></i></a></li>
<li><a href="#"><i class="fa fa-users"></i></a></li>
</ul>
</div>
</body>
/* Default Stuff */
* {
margin:0px;
padding:0px;
text-decoration:none;
list-style:none;
font-family:"Open Sans", sans-serif;
}
/* Website Header */
#header {
background:rgb(28,28,28);
width:100%;
height:60px;
position:absolute;
box-shadow:0px 0px 8px 2px black;
border-top:3px solid rgb(235,50,50);
z-index:99999999;
left:0px;
top:0px;
}
/* Header (Steam Section) */
.steam-box {
background:rgb(50,50,50);
border-left:3px solid rgb(235,50,50);
width:180px;
height:40px;
position:absolute;
z-index:999999999;
top:10px;
left:1160px;
}
.steam-avatar {
width:30px;
height:30px;
margin-left:5px;
margin-top:3px;
border:2px solid rgb(28,28,28);
border-radius:10px;
}
.balance-box {
height:30px;
width:100px;
border-radius:10px;
position:absolute;
margin-top:5px;
margin-left:5px;
display:inline;
background:rgb(28,28,28);
}
.balance-box i {
color:rgb(255,255,255);
line-height:30px;
margin-left:10px;
}
.balance-amount {
color:rgb(255,255,255);
font-family:"Montserrat", sans-serif;
margin-right:10px;
}
.steam-dropdown i {
color:rgb(255,255,255);
font-size:8px;
}
/* Sidebar Menu */
#sidebar-menu {
background:rgb(41,41,41);
width:60px;
height:100%;
position:absolute;
text-align:center;
line-height:60px;
box-shadow:4px 4px 8px black;
left:0px;
top:0px;
}
#sidebar-menu ul {
margin:0px;
padding:0px;
margin-top:3px;
}
#sidebar-menu ul li {
list-style:none;
height:60px;
border-bottom:2px solid rgb(17,17,17);
}
#sidebar-menu ul li a {
color:rgb(255,255,255);
font-size:30px;
display:block;
height:100%
width:100%;
}
#sidebar-menu ul li a:hover {
background:rgb(255,255,255);
color:rgb(41,41,41);
}
#sidebar-menu ul li a:active {
font-size:25px;
}
bitte Ihre Geige noch einmal überprüfen – Raviteja