I am trying to append an icon to an input.
with font awesome is possible to attach that icon on the value of the input, like this:
<input class="btn" type="submit" value="">
where value="" is the equivalent of <i class="fa fa-sign-in"></i>, that is perfect so far, but I need that icon to be bigger, how can I accomplish that ? or what is the other way to attach that icon the input ?
and css
input[type="submit"] {
font-family: FontAwesome;
}
and the icon must be attached to the left.
I would use <button type="submit"></button>
#font-face {
font-family: FontAwasome;
src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/fonts/fontawesome-webfont.woff");
}
.sign-in:after {
content: '';
display: inline-block;
font-family: FontAwasome;
font-size: 2em;
line-height: 2.75rem;
height: 2.75rem;
vertical-align: top;
}
button {
background-color: blue;
border: none;
color: white;
min-height: 2.75em;
margin: 0;
padding: 0 1em;
}
<button type="submit" class="sign-in"></button>
Related
I'm trying to use an material icon within an material input field. This Icon shall show a material tooltip.
The result is a nicely animated, but fully unstyled (like main text) and totally wrong positioned tooltip.
Where did I go wrong?
My html:
<section>
<div class="row">
<mat-form-field>
<input matInput name="newPin" placeholder="Neue PIN" required type="password"
[(ngModel)]="newPin" [disabled]="!selectedToken">
<mat-icon matTooltip="{{getPinTooltip()}}" [matTooltipPosition]="'below'">
info
</mat-icon>
</mat-form-field>
<mat-form-field>
<input matInput name="controlPin" type="password" required
placeholder="Neue PIN wiederholen"
[(ngModel)]="controlPin" [disabled]="!selectedToken">
</mat-form-field>
</div>
</section>
And my less:
body {
font-family: Helvetica, FreeSans, sans-serif;
background-image: url('./assets/images/background.jpg');
}
section {
margin-top: 2em;
}
.row {
margin-bottom: 1rem;
}
mat-form-field {
color: #inputfield-text-color;
width: 95%;
margin-bottom: .5em;
.mat-input-element {
background-color: #inputfield-background-color;
border-radius: .3em;
padding: 1em 0.6em 0.2em 0.6em;
line-height: 1.7em;
&:disabled {
background-color: #inputfield-disabled-color;
color: dimgrey;
}
}
.mat-form-field-label-wrapper {
left: 0.6em;
top: 0.3em;
font-size: .8em;
}
}
// here I tried to fix it, but it had no effect:
.input-tooltip-icon {
position: absolute;
z-index: 1;
top: .3em;
right: -.50em;
cursor: context-menu;
color: #button-color;
}
This is how it looks like:
I was asked my Boss to create this button on our web page
I can create the button add color and text to it but i cannot include that icon present in the button. I shared the problem with my boss then he gave me this link https://gourmet.epark.jp/detail/EG00541264 and told me to look the button in it and do in the same way.
I tried inspecting elements and other ways but still cannot make this.
I don't have much experience of working with CSS so need help.
Thanks in advance.
Edit - I tried this but cannot add that small icon in front of button text
<button style="background-color:#e24f01;color:#fff;border-radius:2px;line-height:30px;font-size:14px;font-weight:700;width:150px">WEB予約</button>
So basically you need to do something like below (copied from the given link):
.shop-navi-app {
font-size: 14px;
font-weight: 700;
width: 200px;
text-align: center;
}
.btn {
background-color: #e24f01;
color: #fff;
border-radius: 2px;
line-height: 30px;
}
.shop-navi-app>a {
padding: 0;
line-height: 35px;
}
.btn>a, .main-search-area-body .search-box .btn-search>a {
color: #fff;
display: block;
line-height: 1;
padding: .3em .8em;
}
a {
color: #2f0a0a;
text-decoration: none;
}
.shop-navi-app .icon {
display: inline-block;
vertical-align: middle;
font-size: 15px;
margin: -1px 10px 0 0;
}
.icon {
font-family: epg-pc!important;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.shop-navi-app .icon-caption {
display: inline-block;
vertical-align: middle;
}
.icon-reserve2::after {
content: url(https://image.ibb.co/esaspT/if_Leaf.png);
}
<div class="shop-navi-app btn">
<a href="/reserve/EG00541264">
<i class="icon icon-reserve2"></i>
<span class="icon-caption">WEB予約</span>
</a>
</div>
Explnation:
<div class="shop-navi-app btn">//for button class
<a href="/reserve/EG00541264">//for link to other page
<i class="icon icon-reserve2"></i>// for icon
<span class="icon-caption">WEB予約</span>// for text
</a>
</div>
In the code, you have div for whole button. Then you have a tag inside div which contains link to redirect when you click on button. a tag contains icon in i tag and span tag for text.
I am trying to override checkbox css in angular.js .It works fine for normal javascript code.
Plunker : https://plnkr.co/edit/gkWm0lgEZ7N88TINcsRS?p=preview
If you remove the css it works fine.
<input type="checkbox" ng-model="checkboxModel.value1" >
CSS:
input[type=checkbox]:checked + label:before {
content: '';
text-shadow: 1px 1px 1px #10758C;
font-size: 24px;
color: #f3f3f3;
text-align: center;
line-height: 24px;
background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_4.gif') !important;
}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 28px;
margin-right: 12px;
font-size: 16px;
line-height: 22px;
font-weight: bold;
}
input[type=radio], input[type=checkbox] {
display: none;
}
label:before {
font-weight: normal;
content: '';
display: inline-block;
width: 18px;
height: 18px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_1.gif?v1');
}
The issue is that the '+' css selector used, is unable to find any matching DOM i.e the label is wrapping the input and no label is present following/after the input, as per the DOM structure in the Plunker link .
Approach 1:
You could use the following DOM structure and modify your CSS to replace all occurrences of label to i
<label>
<input />
<i></i>
</label>
Approach 2:
You could use the following DOM structure and modify your CSS to replace all occurrences of label to input + label (To avoid css being applied to the wrapper label). [Note this approach needs the checkbox to have an id and for the label following it to have a for attribute.]
<label>
<input id="chk1" />
<label for="chk1"></label>
</label>
Hope this helps!
I am trying to use the Font Awesome Map Marker in a Google Autocomplete Input. My goal is to have the Map Marker to the left of the placeholder text, be able to add a color to just the map marker, and to have it always present even when the user is typing. So far I have tried:
<span class="google-address-bar"><input #pacinput id="pac-input" class="form-control" type="text" placeholder=" Enter Your Street Address">
</span>
with :
#pac-input {
font-family: Fira-Sans, FontAwesome, Serif;
background-color: #fff;
width: 400px;
height: 45px;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
but with this solution I am unable to add color to just the Map Marker and since it is placeholder, it disappears once the input is dirty. Has anyone accomplished this?
Use a <label> or <i> for the Font Awseome part and then position then icon over the input. Then all that is required is adjusting the padding.
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.google-address-bar {
position: relative;
}
.google-address-bar i.fa {
color: red;
position: absolute;
height: 45px;
line-height: 45px;
padding-left: .5em;
}
#pac-input {
font-family: Fira-Sans, Serif;
background-color: #fff;
width: 400px;
height: 45px;
font-size: 15px;
font-weight: 300;
padding-left: 1.5em;
text-overflow: ellipsis;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="google-address-bar"><i class="fa fa-map-marker"></i>
<input #pacinput id="pac-input" class="form-control" type="text" placeholder=" Enter Your Street Address">
</span>
I am trying to make a custom placeholder for my "Search" input. It should look like a search icon (using Bootstrap glyphicon glyphicon-search classes for that) and then the word "Search", inside the input element, just as a placeholder looks like, and centered.
I am trying to position the div containing these to elements inside the input but I can't get it right.
Here's the code in jsfiddle.
HTML:
<div class="search-wrapper">
<form class="post_search" id="post_search" action="/posts/explore" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input autocomplete="off" class="search-input" type="search" name="q[caption_or_user_user_name_cont]" id="q_caption_or_user_user_name_cont">
<div class="placeholder">
<div>
<span class="glyphicon glyphicon-search"></span>
<span>Search</span>
</div>
</div>
</form>
</div>
CSS:
.search-wrapper {
max-width: 340px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
display: inline;
}
.search-wrapper .search-input {
border: 1px solid #ddd;
border-radius: 15px;
background-color: #eee;
width: 220px;
height: 31px;
padding: 10px 15px;
transition: 0.25s all;
}
.search-wrapper .search-input:focus {
outline: 0 none;
background-color: #fff;
transition: 0.25s all;
}
.search-wrapper .placeholder {
display: inline;
position: relative;
top: 30%;
width: 40px;
margin: 0 auto;
text-align: center;
font-size: 10px;
}
Then when focusing on the input the placeholder should be gone, I guess this shouldn't be difficult with some js.
But back to the issue, what am I doing wrong? How can I display the placeholder as intented?
Why not simplify this enormously? You already have the placeholder built into HTML! Here's what you can do:
input[type="search"]::-webkit-input-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
}
input[type="search"]:-moz-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
input[type="search"]::-moz-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
}
input[type="search"]:-ms-input-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
}
<input type='search' placeholder='search here' />
Now don't be worried, the icon isn't displaying here because I haven't included font-awesome (or whatever the Glyphicons Halflings font is provided by), but this makes it tremendously simply to create a nice placeholder. It even works like one! It also reduces your code greatly, although browser support is a little less stellar (it really depends how far back you want to go).
Font Awesome uses the unicode glyphs and a font with all those icons included, so as long as you use the right font and copy in the correct character into your content property, this will work.
this was tested in Safari and Chrome
My solution:
https://jsfiddle.net/83x8tfwp/6/
HTML:
<div class="search-wrapper">
<form class="post_search" id="post_search" action="/posts/explore" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input autocomplete="off" class="search-input" type="search" name="q[caption_or_user_user_name_cont]" id="q_caption_or_user_user_name_cont">
<div class="placeholder">
<div>
<span class="glyphicon glyphicon-search"></span>
<span>Search</span>
</div>
</div>
</form>
</div>
CSS:
.search-wrapper {
max-width: 280px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
position: relative;
color: #aaa;
}
.search-wrapper .search-input {
border: 1px solid #ddd;
border-radius: 15px;
background-color: #eee;
width: 220px;
height: 31px;
padding: 3px 15px;
transition: 0.25s all;
}
.search-wrapper .search-input:focus {
outline: 0 none;
background-color: #fff;
transition: 0.25s all;
}
.search-wrapper .search-input:focus + .placeholder {
display: none;
}
.search-wrapper .placeholder {
position: absolute;
top: 8px;
left: 38%;
margin: 0 auto;
text-align: center;
font-size: 13px;
}
JavaScript:
$('.placeholder').on('click', function() {
$('.search-input').focus();
});
if ($('.search-input').val()) {
$('.placeholder').hide();
}
$('.search-input').on('blur', function() {
if (!$('.search-input').val()) {
$('.placeholder').show();
}
});
$('.search-input').on('focus', function() {
if (!$('.search-input').val()) {
$('.placeholder').hide();
}
});
$('.search-input').on('input', function() {
if ($('.search-input').val()) {
$('.placeholder').hide();
}
});