I am trying to fit the font-awesome icon within the textbox, but I was unable to do so. I tried to decrease the width of the textbox but still its appearing a line below. Can you please guide me to fix my mistake in this. I am attaching the code below. Thanks in advance.
<div class="form-row">
<div class="form-group col-md-6">
<label for="primaryName">PRIMARY NAME</label>
<input type="text" class="form-control" id="primaryName" name="primaryName" placeholder="Name" >
<div class="input-group-prepend bg-white">
<span class="input-group-text border-left-0 rounded-right bg-light" id="basic-addon1"><i class="fas fa-user"></i></span>
</div>
</div>
<div class="form-group col-md-6">
<label for="primaryPhone">PRIMARY PHONE NUMBER</label>
<input type="tel" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Phone number">
</div>
</div>
The output on the screen is as below :
I want the output to be something like this:
Okay, the issues are:
You have a wrong class name: fas fa-user should be fa fa-user.
You don't have input-group <div> to enclose.
Fixing both above will fix it.
<div class="form-row">
<div class="form-group col-md-6">
<label for="primaryName">PRIMARY NAME</label>
<div class="input-group">
<input type="text" class="form-control" id="primaryName" name="primaryName" placeholder="Name" >
<div class="input-group-prepend bg-white">
<span class="input-group-text border-left-0 rounded-right bg-light" id="basic-addon1"><i class="fa fa-user"></i></span>
</div>
</div>
</div>
<div class="form-group col-md-6">
<label for="primaryPhone">PRIMARY PHONE NUMBER</label>
<input type="tel" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Phone number">
</div>
</div>
This syntax is not wrong. It is working with latest Font Awesome versions ( > v5.0).
Font Awesome 5,
Syntax - <i class="fas fa-user"></i>
Font Awesome 5 CDN - https://use.fontawesome.com/releases/v5.2.0/css/all.css
Font Awesome 4,
Syntax - <i class="fa fa-user"></i>
Font Awesome 4 CDN - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
If you need any clarification, let me know.
Thanks.
Related
I have this code:
<div class="{{($type != 'forecast')?'col-md-8':'col-md-8'}}">
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}} >
<i class="fa fa-info-circle" title="test"></i>
</div>
</div>
this is the UI
I just want the <i> icon be next to the input field and not in the bottom.
How I can achieve that?
Wrap the input field and the icon within a div with the class input-group.
<div class="input-group">
<input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}}>
<i class="fa fa-info-circle" title="test"></i>
</div>
this is the solution
<div class="form-group">
<label>Name:</label>
<div class="input-group" style="display: flex">
<input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}} >
<i class="fa fa-info-circle" title="test"></i>
</div>
</div>
I want to create an input group with text field and an icon at the beginning of the text field. I have the following code which shows only the text field and I cannot find out why the icon does not appear.
<div class="input-group">
<div class="input-group-text">
<i class="fas fa-th-list"></i>
</div>
<input type="text" class="form-control" id="location" placeholder="Location">
</div>
How can I create an input group with an icon or input with an icon before the placeholder? What is wrong in the code above?
you can use form-group row
<div class="form-group row">
<label for="staticEmail" class="col-lg-1 col-form-label"><i class="fas fa-th-list"></i></label>
<div class="col-lg-5">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email#example.com">
</div>
</div>
</div>
I'm trying to make WordPress theme based on Bootstrap4. Everthing is going fine, but I stock with my contact form, which looks like this:
Here is my code:
<form method="POST">
<div class="input-group input-group-lg mb-3 mt-5">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-user"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="Imię i nazwisko" name="full_name">
</div>
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-envelope-open"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="E-mail" name="email">
</div>
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-pencil-alt"></i>
</span>
</div>
<textarea class="form-control" placeholder="Treść wiadomości" rows="5" name="message"></textarea>
</div>
<input type="submit" value="Wyślij wiadomość" class="btn btn-primary btn-block btn-lg">
The problem is, I don't know how to transform this into a WordPress theme. I added Form in Contact Form 7, like this:
[text* your-name class:form-control class:mb-3 class:mt-5 placeholder "Imię i nazwisko"]
[email* your-email class:form-control class:mb-3 placeholder "Adres e-mail"]
[textarea your-message class:form-control class:mb-3 placeholder "Wiadomość"]
[submit class:btn class:btn-primary class:btn-block class:btn-lg "Wyślij"]
and <?php echo do_shortcode( '[contact-form-7 id="5" title="Formularz kontaktowy"]' ); ?> in my index.html.
It works fine and even has some Bootstrap styles, but looks nothing like in the picture. Especially I don't know how to set the size of my fields and, more important, how to include this fancy little icons in them?
As a beginner, I will appreciate any advice that would help me solve my issue.
You can use html in your contact form 7 form editor.
Replace this code in Contact form 7 => Form text area.
<div class="input-group input-group-lg mb-3 mt-5">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-user"></i>
</span>
</div>
[text* your-name class:form-control class:mb-3 class:mt-5 placeholder "Imię i nazwisko"]
</div>
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-envelope-open"></i>
</span>
</div>
[email* your-email class:form-control class:mb-3 placeholder "Adres e-mail"]
</div>
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-pencil-alt"></i>
</span>
</div>
[textarea your-message class:form-control class:mb-3 placeholder "Wiadomość"]
</div>
[submit class:btn class:btn-primary class:btn-block class:btn-lg "Wyślij"]
I have a form with some input tags and for each of it(I'm using bootstrap). I would like to use span with backgroud coloro but I have a problem with the size of it, because depends of text length (the best way is to use awesome, but I don't find icons useful to my purpose).
Is there a way to fix the width of the grey part of div? I tried with width, like the image, but it resize all the input fields.Thanks
<div class="row">
<!-- Fleet fields -->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-car fa-fw"></i> Fleet inputs
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<form role="form">
<div class="form-group input-group">
<span class="input-group-addon">Ap</span> <input type="text"
class="form-control" placeholder="Application">
</div>
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Cubic">
<span class="input-group-addon">cm<sup>3</sup></span>
</div>
<div class="form-group input-group">
<input type="number" class="form-control" placeholder="Power">
<span class="input-group-addon">H P</span>
</div>
<div class="form-group input-group">
<span class="input-group-addon">Eu</span> <input type="text"
class="form-control" placeholder="Euro class">
</div>
<div class="form-group input-group">
<span class="input-group-addon">Et</span> <input type="text"
class="form-control" placeholder="Engine type">
</div>
<div class="form-group input-group">
<span class="input-group-addon">Tr</span> <input type="text"
class="form-control" placeholder="Traction">
</div>
<div class="form-group input-group">
<span class="input-group-addon">Ts</span> <input type="text"
class="form-control" placeholder="Transmission">
</div>
<div class="form-group">
<label>Note</label>
<textarea class="form-control" rows="2" maxlength="100"></textarea>
</div>
</form>
</div>
<!-- /.panel-body -->
</div>
</div>
Css of input -group-addon
.input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}
you can use for fixed width of grey part of div
you can use for fixed width of grey part of div
1.<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon3">#</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3"> </div>
2. can use also another div <div class="input-group input-group-sm">
3. can use also <div class="input-group">
for the Icon you can use Class="fa fa-edit" or Class="glyphicon glyphicon-pencil"
for the Icon you can use Class="fa fa-edit" or Class="glyphicon glyphicon-pencil"
I'm trying to create a simple inline form using input groups to display icons before the inputs. As far as I'm aware of I'm following the documentation but the form doesn't display as expected. See this JSFiddle, it demonstrates the problem. I assumed it should be displayed like this (only with the icons prepended of course). How can this be solved?
My code:
<form class="form-inline" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="Choose password"/>
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</form>
This is known issue and will be fixed in Bootstrap v.3.2.0 according to this ship list.
Before that you can fix it your self like this:
.input-group {
display: inline-table;
vertical-align: middle;
.input-group-addon,
.input-group-btn,
.form-control {
width: auto !important;
}
}
i've made it work like this:
<form class="form-inline" role="form">
<div class="row">
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email" />
</div>
</div>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="Choose password" />
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</div>
http://jsfiddle.net/n5qmc/
Taken from Bootstrap Docs
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.
I also added in semantic attributes for the labels you should always be using on every input (use .sr-only to hide the labels if necessary). This makes the form not inline but horizontal.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<div class="input-group col-sm-3">
<span class="input-group-addon">
<i class="fa fa-envelope-o fa-fw"></i>
</span>
<input type="email" id="email" name="email" class="form-control" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<div class="input-group col-sm-3">
<span class="input-group-addon">
<i class="fa fa-key fa-fw"></i>
</span>
<input type="password" id="password" name="password" class="form-control" placeholder="Choose password" />
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</form>
Not sure if this is helpful, but I thought I would post as I haven't seen this elsewhere. I was trying to get an inline form with inline labels and an add-on using Bootstrap v3. Here is the code that worked for me. I used the grid system in divs to position the label and input group and the add-on within a grid item.
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="input_one">Label Text</label>
</div>
<div class="col-sm-10">
<div class="input-group">
<input class="form-control" placeholder="Placeholder Text" type="text" name="input_one" id="input_one">
<span class="input-group-addon">Add on text</span>
</div>
</div>
</div>