I want to know how to replace submit button with font awesome icon, I already tried it myself and the icon won't show up on the button.
Here is what I have done so far :
<form action="{{route('destroycourse', $course->id)}}" method="POST">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
<li><a class="tooltips" data-toggle="tooltip" data-placement="top" title="Delete">
<button type="submit" onclick="return confirm('Are you sure to delete this course ?');" style="border: 0; background: none;">
<i class="fa fa-delete"></i>
</button>
</a>
</li>
</form>
The button works just fine only the icon <i class="fa fa-delete"></i> won't show up and it's just showing a blank button. Thanks for the help!
I couldn't find fa-delete. I have used fa-trash to display trash icon.
You just need to include the font-awesome css in your code and correct class name.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form action="{{route('destroycourse', $course->id)}}" method="POST">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
<li><a class="tooltips" data-toggle="tooltip" data-placement="top" title="Delete">
<button type="submit" onclick="return confirm('Are you sure to delete this course ?');" style="border: 0; background: none;">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</a>
</li>
</form>
You are using wrong class of fontawesome
change class of fa fa-delete to fa fa-trash.
Working fiddle
fiddle link
button {
background:tomato;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="submit"><i class="fa fa-trash"></i>Submit</button>
there is no such a class for icon that you are using is fa-delete.use the classes which are present.
for your reference, use these links.
https://www.w3schools.com/icons/fontawesome_icons_text.asp
https://www.w3schools.com/icons/fontawesome_icons_webapp.asp
else use class "fa-trash-o" for delete icon
Related
I have this code in Laravel-5.8:
<i class="fas fa-arrow-right"></i> Submit
That disables a href until when there is no null employee_mid_year_comment fields
How do I transform the same code for submit button shown below?
<form action="{{ route('post.selfreview.all'" method="post" class="form-horizontal" enctype="multipart/form-data">
{{csrf_field()}}
<button type="submit" class="btn btn-primary"> <i class="fas fa-check"></i> Submit</button>
</form>
Thanks
Instead of adding a class on the button, you can use same ternary condition to add disabled property to your button, like this:
<form action="{{ route('post.selfreview.all'" method="post" class="form-horizontal" enctype="multipart/form-data">
{{csrf_field()}}
<button type="submit" class="btn btn-primary" {{ (! $goals->pluck('employee_mid_year_comment')->contains(null)) ? '' : 'disabled' }}> <i class="fas fa-check"></i> Submit</button>
</form>
As any Button has a disabled attribute all you can do is
<form action="{{ route('post.selfreview.all'" method="post" class="form-horizontal" enctype="multipart/form-data">
{{csrf_field()}}
<button type="submit" class="btn btn-primary" {{ (! $goals->pluck('employee_mid_year_comment')->contains(null)) ? '' : 'disabled' }}> <i class="fas fa-check"></i> Submit</button>
</form>
Add disabled attribute in button
<button {{ (! $goals->pluck('employee_mid_year_comment')->contains(null)) ? '' : 'disabled' }} type="submit" class="btn btn-primary">
<i class="fas fa-check"></i> Submit
</button>
so here's the problem
i want to align my buttons , in the div
here the result
my view
i've tried some css but it dont work
now i am not using any custom css for this div
here's my blade file
<td>
<div class="container">
<form method="POST" action="{{ route('users.destroy',$user->id) }}">
{{ csrf_field() }}
{{ method_field('delete') }}
{{-- <!–– //With the <a> tag you are sending a get request.
that's why we changed it like that because the destroy method require a DELETE request
thank you stackoverflow you saved me ––> --}}
<button type="submit" class="btn btn-danger" ><i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</form>
<a href="{{ route('users.show',$user->id) }}"><button type="button" class="btn btn-primary"><i class="fa fa-info-circle" aria-hidden="true"></i></button>
<a href="{{ route('users.edit',$user->id) }}"> <button type="button" class="btn btn-warning"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>
</div>
</td>
Add text-nowrap class to the form, and they will be in one line.
I want to change my normal checkbox looks to as shown below. Please help me with the same.
Image (5) shows not active checkbox and (6) shows checked checkbox.
Current code being used is as below:
<div class="x-form-cb-li x-form-cb-li-h" style="padding-bottom: 5px">
<input type="checkbox" class="custom-checkbox x-form-field" id="optIn-Y" name="optIn" value="Y" style="float:left"><label class="x-form-cb-label" for="optIn-Y">Yes, please send me interesting offers</label>
</div>
To add to the above query. How can I make 2 such checkboxes to behave as radio buttons i.e. if the second one is clicked the first one is no longer checked and vice versa.
It shows how you can put a checkbox as a radio button:
$('.select-option').click(function(){
$(this).find('i').toggle();
var checked=$(this).find('input').prop('checked');
$(this).find('input').prop('checked',!checked);
if(!checked){
$(this).siblings().each(function(){
$(this).find('input').prop('checked',false);
$(this).find('i').first().show();
$(this).find('i').last().hide();
});
}
});
.select-option{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='select-group'>
<span class="select-option">
<input type="checkbox" style="display: none">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none;color:#428bca;"></i>
</span>
<span class="select-option">
<input type="checkbox" style="display: none">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none;color:#428bca;"></i>
</span>
<span class="select-option">
<input type="checkbox" style="display: none">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none;color:#428bca;"></i>
</span>
</div>
Try this and thinks.
$('.select-option').click(function(){
$(this).find('i').toggle();
$(this).find('input').prop('checked',!$(this).find('input').prop('checked'));
});
.select-option{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="select-option">
<input type="checkbox" style="display: none">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none;color:#428bca;"></i>
</span>
Hi I trying to do the following for getting the search button inside the input field with class input-ol, but its not working. I am writing the following code.
<form id="search_form" onsubmit="return false;">
<div class="input-group">
<input type="text" class="input-ol" name="query" placeholder="Ex: cars, watches, exercise... "/>
<span class="input-group-btn" onclick="return searchcontent()">
<button class="btn btn-outline-primary" type="button" aria-label="Search">
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
The output looks like this
I think you need to add the class form-control to your input element to get it to work.
.input-group input.input-ol {
border-radius: 50px;
}
button.rounded {
border-radius: 10px 50px 50px 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-6">
<form id="search_form" onsubmit="return false;">
<div class="input-group">
<input type="text" class="input-ol form-control" name="query" placeholder="Ex: cars, watches, exercise... " />
<span class="input-group-btn" onclick="return searchcontent()">
<button class="btn btn-outline-primary btn-primary rounded" type="button" aria-label="Search">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
</div>
</div>
I also removed the class fa-2x from the icon element just to make the snippet work, but if you have additional styles that make the larger button work with your input field you probably won't have to remove that class.
I am trying to align the search button right next to the search box however button seems to be below. This is what I got:
<form action="{linkto page="search.php"}" method="get" id="searchFormTest">
<input type="text" id="searchPhrase" name="searchPhrase" class="searchInputBox" value="{$lang.enterKeywords}" placeholder="Suchbegriff oder Bildnummer">
<div style="display: inline;">
<button type="submit" value="Submit">
<i style="font-size: 40px;" class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
</form>
Float your search input to the left, float your submit button to the left. Ready.
input[type="search"],
button {
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div style="display: inline;">
<input type="text"/>
<span> <button type="submit" value="Submit">
<i style="font-size: 20px;" class="fa fa-search" aria-hidden="true"></i></span>
</button>
</div>
this should work to have the icon right next to the search box.
You code works just fine in jsfiddle. I think you should look into css styles which are being inherited by the button.
<form method="get" id="searchFormTest">
<input type="text" id="searchPhrase" name="searchPhrase" class="searchInputBox" placeholder="Suchbegriff oder Bildnummer">
<div style="display: inline;">
<button type="submit" value="Submit">
<i style="font-size: 15px;" class="fa fa-search" aria-hidden="true">Search</i>
</button>
</div>
</form>