I'm having trouble locating the icon-envelope in my Bootstrap form. Can someone please help me figure out why it

I'm having trouble figuring out why my envelope icon isn't showing up when I view the HTML page in a browser.

Source code below:

    <!doctype html>

    <html>
        <head>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/3.3.7/css/font-awesome.min.css" rel="stylesheet" />
        <link href='http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600' rel='stylesheet'>

        <style>

            body {
                padding-top: 20px;
                font-size: 16px;
                font-family: "Open Sans",serif;
            }

            h1 {
                font-family: "Abel", Arial, sans-serif;
                font-weight: 400;
                font-size: 40px;
            }

            .margin-base-vertical {
                margin: 40px 0;
            }

        </style>   
    </head>

        <body>

        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">

                    <form class="margin-base-vertical">
                        <p class="input-group">
                            <span class="input-group-addon"><i class="icon icon-envelope"></i></span>
                            <input type="text" class="form-control input-lg" name="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff889a9d929e8c8b9a8dbf8b9a8c8bd19c9092">[email protected]</a>" />
                        </p>
                        <p class="help-block text-center"><small>Subscribe.</small></p>
                        <p class="text-center">
                            <button type="submit" class="btn btn-success btn-lg">Submit</button>
                        </p>
                        </span>
                    </form>

                </div>
            </div>
        </div></body>
    </html>
htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

Give this a go:

  <!doctype html>

<html>
    <head>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600' rel='stylesheet'>

    <style>

        body {
            padding-top: 20px;
            font-size: 16px;
            font-family: "Open Sans",serif;
        }

        h1 {
            font-family: "Abel", Arial, sans-serif;
            font-weight: 400;
            font-size: 40px;
        }

        .margin-base-vertical {
            margin: 40px 0;
        }

    </style>   
</head>

    <body>

    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">

                <form class="margin-base-vertical">
                    <p class="input-group">
                        <span class="input-group-addon"><span class="fa fa-envelope"></span></span>
                        <input type="text" class="form-control input-lg" name="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="433426212e223037263103372630376d202c2e">[email protected]</a>" />
                    </p>
                    <p class="help-block text-center"><small>Subscribe.</small></p>
                    <p class="text-center">
                        <button type="submit" class="btn btn-success btn-lg">Submit</button>
                    </p>
                    </span>
                </form>

            </div>
        </div>
    </div></body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Form submission success: Let's connect! (and start fresh)

I have a contact form that consists of: contactform.js (for validation) contactform.php (for posting & delivering form information) the HTML code containing the front end of the form The contact form successfully fills and delivers informati ...

javascriptphphtmlcontact-form

Having trouble with implementing image thumbnail in Bootstrap 4 select options

Is there a solution for the Bootstrap 4 select option not displaying added image thumbnails properly? Thank you <select class="form-control" id="exampleFormControlSelect1"> <option><img src="/assets/images/platform/abs.png">AB ...

htmlcssbootstrap-4

Can someone assist me in creating a header background image that can scale properly?

Hey there! I'm looking to make the background image for the header on my website scalable so it remains visible on any device while ensuring that the text is still readable. Is this even possible? Currently, I am working on pogl.co/ and need it to loo ...

htmlcssimage

"Interactive bootstrap tabs nested within a dropdown menu that automatically close upon being clicked

Hey, I've got a dropdown with tabs inside. When I click on certain tabs within it, they close but the content inside the tabs that I click on changes, so it's functioning properly. However, the issue is that it closes when I want it to stay open ...

javascriptjqueryhtmlcsstwitter-bootstrap

fill the designated column in accordance with the specific criteria

Is there a method to automatically fill in a specific column based on certain conditions? I am looking to populate the column labeled [Last] when the column index is 1 and the corresponding name is [First]. import {Component, OnInit} from '@angular ...

htmlangulartypescript

Modifying attributes for individual components in Vue.js classes

Recently, I integrated a reusable component called "LightBox" into my website, which displays images in higher resolution. The LightBox functionality is linked to each element having a thumbnail. However, I encountered an issue. There are multiple elements ...

javascriptcssvue.jsvue-componentvuejs3

Arrange a bootstrap table according to the specified column index

Typically, bootstrap table sorting is based on the first column. If you want to change this default behavior, you can use data-sort-name="column_name" data-sort-order="asc/desc", as explained in this link. In my case, the columns are d ...

javascripthtmlbootstrap-4

I'm looking to have the checkbox automatically checked when the <p> Tag is clicked in JavaScript

I need to modify the checkbox input so that when I click on any Todo Item, the checkbox is checked. However, after implementing the code below, it only works for the first element clicked. How can I make it work for each individual todo list item without c ...

javascriptcssnode.jscheckboxejs

Is there a way for me to manage the appearance of the printed document's layout?

I have successfully added 3 print buttons to my website, each one designed to print a specific portion (div) of the webpage. Here is the code snippet for this functionality: function printPage(id) { var html="<html>"; //html+="<link rel="st ...

javascriptcss

Converting the stage object to JSON format and incorporating it into an HTML5 environment using

$("#show").click(function(){ var stage = Kinetic.Node.create(json, 'container2'); var ball = new Image(); var cone = new Image(); var tshirt = new Image(); ball.onload = function() { stage.get('.ball').apply ...

jqueryhtmlkineticjs

Discovering the true width of elements that have overflow hidden in IE7 using jQuery

I am dealing with a dynamic list that contains around 50 elements, but the exact number may vary. <div style="width:465px;"> <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa& ...

jquerycssinternet-explorer-7

Why won't my navbar shift to the right when using mr-auto?

I attempted to use mr-auto to shift the navbar to the right, but it doesn't seem to be working as expected. I'm a bit confused as to why. Can someone provide some insight? Below is the relevant code snippet: <nav class="navbar navbar-expa ...

htmlcssbootstrap-4

Ways to customize the default CSS styles of angularJS for elements like search box and more

Looking for a way to customize the appearance of an AngularJs search box? <div ng-controller="PersonListCtrl"> <div class="bar">Search: <input ng-model="query"> </div> <ul cl ...

cssangularjs

Tips for adjusting the offset dimensions in Bootstrap 4 grid systems

Incorporating Bootstrap 4 into my Angular 8 application, I am faced with an issue on the main page where I have two components sized md-5 and md-6, respectively. To create a gap between them, I used offset-md-1. However, the offset size is too large, res ...

htmlcssbootstrap-4frontendangular-ui-bootstrap

Media queries for Tailwind CSS in a Node JS application do not function properly when viewed on a mobile device

I recently developed a Node JS app using EJS templates and Tailwind CSS. Check it out live here: If you're curious, feel free to explore the code on Github. While the media queries function well on desktop devices, they seem to be ineffective on mo ...

cssnode.jsmedia-queriestailwind-cssejs

Utilizing CSS in JS for nested hover styles with Material UI: a step-by-step guide

I am currently utilizing Material UI and in the process of converting regular CSS classes into a JavaScript file. .nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .navItem { float: left; flex: 1; } .navLin ...

cssreactjsmaterial-uijss

Customize a directive in angular js according to the item chosen from a dropdown menu

I have a dropdown menu and a calendar. I have already created custom directives for calendar validation. Now, my goal is to dynamically change the directive based on the selected item in the dropdown menu. Here is the HTML code snippet: <select class= ...

javahtmlangularjs

Python script executed in DJANGO is displaying the output as "none"

I have a DJANGO app (kwtest) that includes VIEWS(a+b) and their respective URLs. When I navigate to the first kw_dash (kw_dash.html) URL and click a button, it triggers a python script (from import) and is supposed to display the results on the "return_res ...

pythonhtmldjango

Angular: Implementing asynchronous data retrieval for templates

I am currently facing the following issue: I need to create a table with entries (Obj). Some of these entries have a file attribute. When an entry has a file attribute (entry.file), I need to make a backend call to retrieve the URL of that file: public g ...

htmlangulartypescriptrxjs

Bootstrap for Twitter: How to Customize Text in the Navigation Bar

As per the twitter bootstrap guidelines, I am supposed to enclose text in a <p> tag for correct leading and color. However, when I try to do this within the navbar element or any of its sub-levels, the text does not inherit any of the styling propert ...

htmlcsstwitter-bootstrap