This question already has answers here:
How do I add a Font Awesome icon to input field?
(8 answers)
Closed 4 years ago.
I was trying to use font awesome and place it inside a search box.
I used the ff html:
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2 search"
type="search"
placeholder="Search.."
aria-label="Search"
/>
</form>
And then to control the layout of the search I place the ff CSS:
input.form-control.mr-sm-2.search{
outline: none;
border: none;
font-size: 12px;
border-radius: 2px;
position: relative;
}
input.form-control.mr-sm-2.search:before{
content: "\f002";
font-family: 'FontAwesome';
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 13px;
padding-right: 15px;
position: absolute;
top: 15px;
left: 0;
}
Any idea why the font awesome icon don't work?
Did you check by F12 and see console tab? It may be you missing font file and image file.
You should use CDN link:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
I checked some and following could help you.
Put a font-awesome icon inside an input tag
try this
:before or other pseudo classes does not work on self closing elements sucs as <br/>, <img /> or <input /> tags
You can do this as follows
.search-wrap{
position: relative;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
max-width: 200px;
}
.search-wrap input{
border: 0px;
padding-left: 20px;
}
.search-wrap i.fa{
position: absolute;
left: 10px;
top:10px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="search-wrap">
<input class="form-control" type="text" Placeholder="Search here.." />
<i class="fa fa-search"> </i>
</div>
It is not showing because ::after and ::before[pseudo-elements] works only when they are defined in containing elements. read W3C specifications
Related
How do I add an icon as the placeholder text inside an input field?
The icon is placed outside of the input field. I tried moving it using padding and margin, but I can't seem to position it exactly where I want it.
Your best option is either using CSS Grid or Flexbox to center the icon within a wrapper element.
You can read more about Grid here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
And you can read more about Flexbox here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
Here is an example using Grid:
body {
background: #F5F5F6;
}
label {
display: grid;
grid-template: 1fr / auto 1fr;
gap: 12px;
border: 1px solid #CFD5DB;
border-radius: 5px;
background: #fafafa;
padding: 12px;
color: #6C757D;
cursor: text;
}
label:focus-within {
border: 1px solid #000;
}
label>input {
outline: none;
border: none;
background: transparent;
}
<label>
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input placeholder="Enter Hotel name" type="search" />
</label>
A couple of important things to note about this example:
I've used a label element to wrap the input. This gives us the behavior of clicking the icon to focus the input field without needing to use javascript.
I've used input[type=search] because that is more semantically correct for your usage, and will aid users of screen readers in understanding the purpose of the text field.
I've used the :focus-within pseudo-selector to target and style the label when its child input is focused.
I've opted to use an svg icon but an img based icon will work just as well.
I could've used Flexbox just as easily but I wanted to use the gap property on the wrapping label instead of setting a margin on the icon or input. gap also works with Flexbox the same way it does with Grid except that Safari only supports gap on Grid layouts. If you opt for the Flexbox method, use a margin on one of the child elements instead of gap.
If you are using bootstrap4/bootstrap5 you can do easily
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<div class="container">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-search"></i>
</div>
</div>
<input type="text" placeholder="search here" class="form-control" name="search" />
</div>
</div>
Check this
Place the two inline controls (the image and the input) into a container (e.g. a Div).
The container must be styled position:relative
Style the inline elements as position:absolute; top:0; left:0, which will place them one-on-top-of-the-other. Then use z-index to decide which element is on top and which is below.
Then a bit of padding, so that the input text is pushed over to the right to make room for the image... and you have it.
The border-radius is not necessary - it only rounds the corners of the image.
.iwi{
position:relative;
}
img,input{position:absolute;top:0;left:0;}
input{
z-index:1;
font-size:1.3rem;
padding: 3px 5px;
padding-left:25px;
}
img{
z-index:2;
margin-top:7px;
margin-left:3px;
border-radius: 20px;
}
::placeholder{
color: #ddd;
}
<div class="iwi">
<img src="https://placekitten.com/20/20" />
<input type="text" placeholder="Name the kitten" />
</div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.input-container {
display: -ms-flexbox; /* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}
.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
outline: none;
}
.input-field:focus {
border: 2px solid dodgerblue;
}
/* Set a style for the submit button */
.btn {
background-color: dodgerblue;
color: white;
padding: 15px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<form action="/action_page.php" style="max-width:500px;margin:auto">
<h2>Register Form</h2>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="Username" name="usrnm">
</div>
<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" placeholder="Email" name="email">
</div>
<div class="input-container">
<i class="fa fa-key icon"></i>
<input class="input-field" type="password" placeholder="Password" name="psw">
</div>
<button type="submit" class="btn">Register</button>
</form>
</body>
</html>
This question already has answers here:
2 colors in one placeholder of input field
(3 answers)
Closed 4 years ago.
The placeholder should show Enter a name* with a white text but the * red.
I'm using Bootstrap 4 in Chrome. My HTML and CSS code are these:
.form-control::-webkit-input-placeholder::after {
color: red;
text-align: right;
font-size: 50px;
content: "*";
}
<input type="text" placeholder="Your Name" class="form-control py-4" style="background: #273a71; color: white; border: 0;">
To achieve expected result, use below option
Use span or label instead of placeholder (Using span, in case you want label and placeholder)
Use on focus to hide span with css
.placeholder{
color: white;
position: relative;
top: -30px;
}
.placeholder:after{
content: '*';
color: red
}
.form-control:focus + .placeholder {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<input type="text" class="form-control py-4" style="background: #273a71; color: white; border: 0;" required="required">
<span class="placeholder">Your Name</span>
codepen - https://codepen.io/nagasai/pen/GzQVev
I have an input field with a Fontawesome icon that I added through content in my CSS file. This icon will only show on validation. I want to add bootstrap's tooltip to the icon, but I can't figure out a way to do this since my icon is on the CSS file and not on the HTML file. This is what I'm trying to achieve.
It might be important to note that I'm trying to achieve this in a modal.
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
.input-validation-error input {
border: 2px solid #f46262;
}
.input-validation-error input[type="text"] {
position: relative;
}
.input-validation-error::before {
font-family: "Font Awesome 5 Free";
color: #f46262;
position: relative;
content: "\f06a";
font-weight: 900;
z-index: 2;
top: 36px;
right: -210px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<form class="registration-form">
<div class="form-group input-validation-error">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Nombre de usuario" data-toggle="tooltip" data-placement="top" title="I'm a tooltip">
</div>
</form>
Add an empty "placeholder" div before the input and position it the same as the icon. Use the placeholder as the tooltip trigger...
.tooltip-trigger {
position: absolute;
z-index: 3;
top: 36px;
left: 210px;
width: 30px;
height: 30px;
}
https://www.codeply.com/go/VxFPfXj9oa
Finally figured it out. My z-index was causing trouble, so I changed it from:
z-index: 3;
to
z-index: 5 !important;
I have a search bar and I am trying to embed a font awesome icon, however it does not seem to be getting wrapped within the container div
Here is an image which shows where the icon currently is and I want the search icon to go
Any help will be greatly appreciated, thank you
CSS:
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
.searchbar{
position:relative;
}
.searchbar input { text-indent: 32px;}
.searchbar .fa-search {
position: absolute;
top: 10px;
left: 10px;
color: #4f5b66;
}
.search_field {
min-width: 270px;
width: 65%;
height:40px;
font-size: 2em;
behavior: url(js/PIE.htc);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-right: -4px;
margin-top: 10px;
float:right;
}
HTML:
<div class="searchbar">
<form method="GET" action="search.php" style= "padding: 1px; font-family: Tahoma, Geneva, sans-serif;">
<span class="fa fa-search fa-lg"></span>
<input type="text" name="search" class="search_field" value="<?php echo $_GET['search']; ?>" id="search" maxlength="20" />
<input type="hidden" name="start" value="0" />
<input type="hidden" name="limit" value="10" />
</form>
</div>
You should wrap your input on a div, position that DIV exactly where you want the text input to be, and then set the DIV to position relative. Also place your icon inside this DIV.
On another note, if you ICON is supposed to be clickable for submit purposes, dont use a span, either use a 'button' tag or an actual input-type:submit
How do I use the search icon included in Font Awesome for input? I have a search feature on my site (based on PHPmotion), that I want to use for the search.
Here's the code:
<div id="search-bar">
<form method="get" action="search.php" autocomplete="off" name="form_search">
<input type="hidden" name="type" value="videos" />
<input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
#ffffff" />
<input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
<div id="searchBoxSuggestions"></div>
</form>
</div>
You can use another tag instead of input and apply FontAwesome the normal way.
instead of your input with type image you can use this:
<i class="icon-search icon-2x"></i>
quick CSS:
.icon-search {
color:white;
background-color:black;
}
Here is a quick fiddle:
DEMO
You can style it a little better and add event functionality, to the i object, which you can do by using a <button type="submit"> object instead of i, or with javascript.
The button sollution would be something like this:
<button type="submit" class="icon-search icon-large"></button>
And the CSS:
.icon-search {
height:32px;
width:32px;
border: none;
cursor: pointer;
color:white;
background-color:black;
position:relative;
}
here is my fiddle updated with the button instead of i:
DEMO
Update: Using FontAwesome on any tag
The problem with FontAwsome is that its stylesheet uses :before pseudo-elements to add the icons to an element - and pseudo elements don't work/are not allowed on input elements. This is why using FontAwesome the normal way will not work with input.
But there is a solution - you can use FontAwesome as a regular font like so:
CSS:
input[type="submit"] {
font-family: FontAwesome;
}
HTML:
<input type="submit" class="search" value="" />
The glyphs can be passed as values of the value attribute. The ascii codes for the individual letters/icons can be found in the FontAwesome css file, you just need to change them into a HTML ascii number like \f002 to and it should work.
Link to the FontAwesome ascii code (cheatsheet): fortawesome.github.io/Font-Awesome/cheatsheet
The size of the icons can be easily adjusted via font-size.
See the above example using an input element in a jsfidde:
DEMO
Update: FontAwesome 5
With FontAwesome version 5 the CSS required for this solution has changed - the font family name has changed and the font weight must be specified:
input[type="submit"] {
font-family: "Font Awesome 5 Free"; // for the open access version
font-size: 1.3333333333333333em;
font-weight: 900;
}
See #WillFastie 's comment with link to updated fiddle bellow. Thanks!
Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.
Create an <input> tag followed by a standard <i> tag with the icon you need.
Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.
(Optional) You can make the icon active, to perhaps submit the data, via standard JS.
See the three code snippets below for the HTML / CSS / JS.
Or the same in JSFiddle here:
Example: http://jsfiddle.net/ethanpil/ws1g27y3/
$('#filtersubmit').click(function() {
alert('Searching for ' + $('#filter').val());
});
#filtersubmit {
position: relative;
z-index: 1;
left: -25px;
top: 1px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>
For those, who are wondering how to get FontAwesome icons to drupal input, you have to decode_entities first like so:
$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);
Change your input to a button element and you can use the Font Awesome classes on it. The alignment of the glyph isn't great in the demo, but you get the idea:
http://tinker.io/802b6/1
<div id="search-bar">
<form method="get" action="search.php" autocomplete="off" name="form_search">
<input type="hidden" name="type" value="videos" />
<input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color:
#ffffff" /><!--
--><button class="icon-search">Search</button>
<div id="searchBoxSuggestions"></div>
</form>
</div>
#search-bar .icon-search {
width: 30px;
height: 30px;
background: black;
color: white;
border: none;
overflow: hidden;
vertical-align: middle;
padding: 0;
}
#search-bar .icon-search:before {
display: inline-block;
width: 30px;
height: 30px;
}
The advantage here is that the form is still fully functional without having to add event handlers for elements that aren't buttons but look like one.
Similar to the top answer, I used the unicode character in the value= section of the HTML and called FontAwesome as the font family on that input element. The only thing I'll add that the top answer doesn't cover is that because my value element also had text inside it after the icon, changing the font family to FontAwesome made the regular text look bad. The solution was simply to change the CSS to include fallback fonts:
<input type="text" id="datepicker" placeholder="Change Date" value=" Sat Oct 19" readonly="readonly" class="hasDatepicker">
font-family: FontAwesome, Roboto, sans-serif;
This way, FontAwesome will grab the icon, but all non-icon text will have the desired font applied.
.fa-file-o {
position: absolute;
left: 50px;
top: 15px;
color: #ffffff
}
<div>
<span class="fa fa-file-o"></span>
<input type="button" name="" value="IMPORT FILE"/>
</div>
simple way for new font awesome
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="txtSearch" >
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
</div>
</div>
to work this with unicode or fontawesome, you should add a span with class like below, because input tag not support pseudo classes like :after. this is not a direct solution
in html:
<span class="button1 search"></span>
<input name="username">
in css:
.button1 {
background-color: #B9D5AD;
border-radius: 0.2em 0 0 0.2em;
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5);
pointer-events: none;
margin:1px 12px;
border-radius: 0.2em;
color: #333333;
cursor: pointer;
position: absolute;
padding: 3px;
text-decoration: none;
}