I'm trying to create buttons like you can see below with Bootstrap 4:
The icon (font awesome) should be centered to the text and all the icons have the same y position on the screen. The border of the buttons should be invisible.
Do I have to use a button or is it better to use another element? Any help is welcome.
With Bootstrap 4 and Font-Awesome, if you want to place the icon to the left of the text, use the following snippet
<button class="btn btn-lg" style="background-color:transparent;">
<i class="fa fa-pencil"></i> Edit
</button>
Create a div and then put font-awesome icons into it and then write text then provide necessary css and then you can use (click) event on the div.
Install bootstrap and font-awesome
and then provide the path in the 'styles' of angular-cli.json.
or,
<button class='btn btn-lg ' style='background-color:transparent;'>
<div style='text-align:center;'><i class="fa fa-times"></i></div>
Cancel Reservation
</button>
Try out this. It will solve your query.
<i class="flaticon2-pie-chart"></i> Success
Related
I have the following button:-
<button id="show" style="background:#4d9b84" class=" btn btn-primary">Click here to learn more</button>
and i wrote the following jQuery to change the button's text from "Click here to learn more" to an upper arrow using font awesome, as follow:-
$("#show").click(function () {
$("#show").html("<i class=\"fa fa - arrow - up\" aria-hidden=\"true\" style=\"color:#2ebdbe!important\"></i>");
}
});
but i got an empty button when i click on the button as follow:-
any advice please, on how i can add a font awesome icon inside a button using jQuery?
Thanks
you need to remove the spaces in the class name:
$("#show").html("<i class=\"fa fa-arrow-up\" aria-hidden=\"true\" style=\"color:#2ebdbe!important\"></i>");
You have spaces in your class name it should be fa-arrow-up.
I am developing an MVC6 project in Visual Studio 2015. I have just added Bootstrap 3.3.6 using Bower. On a very simple html page I have referenced the CSS in the header and Bootstrap at the bottom of the body as follows:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
I defined a button as follows:
<button class="btn btn-primary">Hello</button>
When I debug the project (IIS, IE11) the button appears and is clearly styled by Bootstrap but there is no hand cursor.
If I use the browser to navigate to an example of a Bootstrap styled button, for example here: http://www.w3schools.com/bootstrap/bootstrap_buttons.asp, the hand cursor appears as I would expect. So it's not my browser at fault.
Can anyone suggest why I am not getting a hand cursor from a simple Bootstrap styled button please?
Try add role='button' instead. I have had this problem even though the documentation on bootstrap says type='button' should do the work but mine didn't.
You need to get rid of the button tags and just use anchor tags with bootstrap classes. For example:
instead of:
<button class="btn btn-primary">Hello </button>
write:
Hello
This will make the HAND CURSOR appear when hovering over the btn bootstrap class
Try adding an href such as href="#" to the button.
<button class="btn btn-primary" href="#">Hello</button>
When you start changing native element types and roles there are other side effects, including how those elements interact with accessibility for users. See this MDN link for details on that: Button Role
You are missing the type="button".
In bootstrap source less file there are several css rules specified for the input[type="button"] rule. (Checked for version 3.3.6)
You might not have to use it, but it was intended to be used with type="button".
In both W3School and Bootstrap buttons demo page they are using type="button"
Your code:
<button class="btn btn-primary">Hello</button>
W3:
<button type="button" class="btn btn-default">Default</button>
If it is still not working after adding type="button" (or submit or reset), try looking on your element with inspector and see what overrides the "pointer: cursor" css rule.
I was looking like you for a way to add this hand over,
until I saw that hand appearing once the form was filled.
(was using
<button type="button" >
by the way )
Create new css:
.cursor-pointer { cursor: pointer; }
Apply css on button:
class="cursor-pointer"
I encountered the same issue. When hover over the button hand cursor is not shown instead mouse pointer is seen. Fixed it by using the following ways.
1st Fix:
<input type="button" id="myBtn" class="btn btn-primary" value="Hello">
2nd Fix:
<a role="button" class="btn btn-primary" href="#">Hello</a>
i am working on setting up my social icons on footer using font awesome and bootstrap-social.css. When i do this
<button class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></button>
it works properly see image
but when i try to use same css classes in < a > tag
<a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a>
i get result like this see image,its hover,icon in the middle, etc. styles are messed up.
There is a 'how to use' example on original page where i dl-ed bootstrap-social.css with < a > tag used because of that i am confused.
So my goal is to apply that button like style to a link or add link in button with that style if its possible somehow. Any help is appreciated.
<a class="btn btn-social-icon btn-facebook" href="here paste your link"><i class="fa fa-facebook"></i></a>
When you use <a> element it has default hover properties,so you can disable them.
Here is example: https://jsbin.com/qogunenura/1/edit?html,css,output
On my site 33hotels.com I am using Buttons, such as provided by Twitter Bootstrap, to indicate hotels' amenities.
What I need is to clearly display that an amenity is absent.
For this, I am already displaying the button in red with text crossed by horizontal line. However, from user testing feedback, this is not enough to deliver the message that the amenity is absent. So I need something more clear.
I am thinking of putting a Large cross (letter 'X' or an icon) on top of the button, of the size of the button. The cross should be thin as not to obscure the text but still clearly visible.
My questions are:
How do you put an 'X' on top of a button?
Any elegant and re-usable way to do it?
Maybe define a web component or Angular directive "crossed" that can be attached to an HTML Element?
EDIT. Made my question more clear - I need to put a large X of the size of the button.
EDIT 2: Here is the ugly version of what I'm trying to achieve. However, apart from being ugly, it fails to make the text crossed readable. So perhaps I should use a thinner version of 'X'?
EDIT 3: Here is as good as I could get, not too pretty :(
http://cl.ly/image/1H1p0n2V2200
This is How you do it >> Close button
html
<button class="btn btn-default">End Tour<div class="closebox">X</div>
css
button {
position:relative;
}
.closebox {
position:absolute;
opacity:0.5;
top:-30px;
right:0;
left:0;
font-size:5em;
}
In your case, following code will work for you
<div class="btn push ng-binding btn-default"
ng-class="feature.selected ? 'btn-primary': 'btn-default'"
ng-mousedown="toggleFeature(feature, category, $event)"
ng-bind="feature.name">
<span style="position: relative;top: -9px;float: right;right: -9px;">×</span>
Courtyard
</div>
you can do it using css dynamic content via content:"X" and placing the style on your button element utilizing pseudo-elements for placing the content....
my example is entirely too specific with sizes and positioning: i just wanted to show you how you could do it:
http://jsbin.com/hijaw/1/
Maybe you can use font-awesome or glyphicon to represent when an amenity is absent or not (ok or cross icon + amenity name). Very easy to use and you will avoid to use images or dirty CSS. check Bootstrap 3 examples in:
http://fortawesome.github.io/Font-Awesome/examples/
with bootstrap 3, you can do something like below
<button type="button" class="close">Close
<span aria-hidden="true" style="font-size: 20px">×</span>
</button>
EDIT
another example with font-aswesome
<button class="btn btn-default btn-sm" >
<i class="fa fa-times"></i> Settings
</button>
EDIT 2
to change the size
<button class="btn btn-default btn-sm" >
<i class="fa fa-times" style="font-size: 1em"></i> Settings
</button>
you can increase font size using style on tag
I am trying to make Disqus comment counter link in Bootstrap button, but everything I tried was unsuccessful.
The idea is that the whole button should be link.
When I am trying to do like this:
<a href="page.html#disqus_thread">
<button type="button" class="btn btn-default"></button>
</a>
the Disqus just overwriting everything about Bootstrap button CSS and just leave naked link like "1" (I left just number in disqus settings).
When I am trying this way:
<button type="button" class="btn btn-default">
</button>
the button appears, as well as comment counter link, but the button is not the link like if it was wrapped into <a> tag. So I need some help.
What you are trying is not valid HTML. Try something like this: