Glyphicons werden im WebBrowser nicht angezeigt HTML/CSS

lea310

Grünschnabel
Hallo zusammen,

ich bin zwar neu im Forum, jedoch habe ich trotzdem schon die anderen Einträge zu diesem Thema gelesen. Leider konnten Sie mir nicht helfen, da die Bootstrap Version zu alt war oder die Hilfelinks nicht mehr aktuell sind.
Daher erstelle ich nun einen Eintrag speziell zu meinem Problem. Leider werden mir die Glyphicons nicht angezeigt. Weshalb keine Ahnung... bin schon länger am rätseln. Anbei ein Screenshot wie die Seite aussieht. Man sieht links an den Eingabefeldern, dass da quasi die Glyphicons sind, jedoch nicht angezeigt werden. Bevor ich den Code eingefügt habe, waren links die Eingabefelder auch mit runden Ecken versehen. Das ist für mich ein Indiz, dass sie quasi zur Hälfte schon da sind.
Bei einer anderen Seite, die ich erstellt habe, werden die Glyphicons problemlos angezeigt. Den Code habe ich 1 zu 1 kopiert.
Ich arbeite mit HTML, CSS und Bootstrap in VS Code, sowie Firefox als Browser. Alles ist up to date und die Entwicklerkonsole zeigt mir auch keinen Fehler an, von der Seite sollte alles bestens sein.

Ich hoffe jemand kann meinen Fehler entdecken. Ich sehe anscheinend den Wald vor lauter Bäumen nicht mehr...:D

Vielen Dank schon einmal im Voraus!
Schönes Wochende, liebe Grüße
Lea

Registration.png

Das ist aktuell mein HTML-Part:
HTML:
<!-- Registration Form -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <title>Registration</title>
        <link rel="stylesheet" type="text/css" href="designRegistration.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
            <div class="form">
                <div class="note">
                    <h1><p>Registrierung</p></h1>
                </div>
                <div class="form-content">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                            <div class="input-group">
                              <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                <input type="text" class="form-control" name="username" placeholder="Benutzername" value=""/>
                            </div>
                            </div>
                            <div class="form-group">
                              <div class="input-group">
                              <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                                <input type="text" class="form-control" name="email" placeholder="EMail-Adresse" value=""/>
                            </div>
                          </div>
                            <div class="form-group">
                            <div class="input-group">
                              <span class="input-group-addon"><i class="glyphicon glyphicon-key"></i></span>
                                <input type="text" class="form-control" name="password" placeholder="Neues Passwort" value=""/>
                            </div>
                            </div>
                            <div class="form-group">
                            <div class="input-group">
                              <span class="input-group-addon"><i class="glyphicon glyphicon-key"></i></span>
                                <input type="text" class="form-control" name="password2" placeholder="Passwort wiederholen" value=""/>
                            </div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btnSend">Senden</button>
                </div>
            </div>
        </div>
</body>
</html>
[/ICODE]

Mein CSS-Code:
[ICODE]
html,body {
    background-image: url('https://images-ext-2.discordapp.net/external/-dccWextxxFHqcUPwznnZ8bmPP77JYqnPuKGMIeWsdk/https/getwallpapers.com/wallpaper/full/5/1/0/1283956-chevy-drag-car-wallpaper-1920x1200-photos.jpg?width=1073&height=670');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    font-family: 'Raleway', sans-serif;
}
.container {
    height: 100%;
    align-content: center;
}
.form {
    margin: auto;
    padding: 300px;
    height: 370px;
    /*margin-top: auto;
    margin-bottom: auto;*/
    width: auto;
}

.note {
    text-align: center;
    font-weight: 700;
    height: 60px;
    background: -webkit-linear-gradient(left, #0062cc, #8811c5);
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    line-height: 80px;
}
.form-content {
    padding: 5%;
    /*border: 3px solid #0062cc;
    border: 3px solid;
    border-color: linear-gradient(left, #0062cc, #8811c5);*/
    background-color: rgba(65, 63, 63, 0.925) !important;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}
.glyphicon {
    background-color: #0062cc;
    color: black;
    border:0 !important;
}
.btnSend {
    border:none;
    border-radius:0.3rem;
    padding: 1%;
    width: 20%;
    cursor: pointer;
    background-color: #0062cc;
    color: #fff;
    font-weight: bold;
}
.btnSend:hover {
    color: black;
    background-color: white;
}
[/ICODE]
 
Zuletzt bearbeitet von einem Moderator:
Hi,
Als erstes referenzierte CSS-Dateien gehören in den Head. Genauso Javascriptdateien. Die kannst Du aber auch aus Ladereihenfolgegründen vor dem schließenden Body referenzieren. Vor HTML oder dem Doctype darf nichts stehen.
Des Weiteren muss jQuery vor der Bootstrap JS geladen sein. Sonst kann das jQuery in dieser nicht susgeführt werden.

Grüße
 
Vielen lieben Dank! Habe ich schon mal umgesetzt, jetzt fehlt mir nur noch die Lösung für die Glyphicons.:)
 
Hi,
Ich hab grad mal in der Doku zu Bootstrsp 4 geschaut und Bootstrap 4 liefert keine Icons mehr mit aus. Heißt Du Must selbst eine Iconbibliothek hinzufügen.

Icons
 
Zurück