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.
Related
In my Angular5 app , I have a datepicker library which is rendering a datepicker with some buttons
in those buttons , i want to inject some icons.
When inspecting the page ; the html structure would be something like this
<button>
<i class="glyphicon glyphicon-chevron-left"></i>
<button>
but as i'm not allowed to modify the html view , i cannot add this icon directly in the html :
<i class="glyphicon glyphicon-chevron-left"></i>
The solution is to do it with css.
Suggestions?
Glyphicon uses the pseudo classes :before & :after to inject the icons.
Use the :after pseudo class on this element and try adding the code of this specific icon. It should be something like this:
.glyphicon.glyphicon-chevron-left:after{
content:"\e079";
}
The content used in the code will vary. You can double check it in this link in "CSS rule". Also remember that you may want to style it properly to guarantee its visibility.
Best of luck!
By JS you can do this:
var elem = document.getElementsByTagName('button');
elem[0].innerHTML += "<i class='glyphicon glyphicon-chevron-left'></i>";
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
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 want to change the content of a button when clicked - specifically I want it to change to a "block" state where it can't be clicked, while I want to give it a Glyphicon.
What I want added:
<span class="glyphicon glyphicon-saved" aria-hidden="true"></span>
and the text "Downloaded" - I wish for this to erase the previous text and Glyph icon, and I've found this little peace of jQuery that changed the text on click.
<script>
$(document).ready(function(){
$('#download-btn').click(function() {
$("#download-btn").text('Downloaded');
})
});
</script>
but it wouldn't allow me to add any HTML code, it just outputted it as pure text.
And last, I want to add the following style btn-block to the button.
This is the button before being clicked;
<button id="download-btn" type="button" class="center btn btn-primary">
<span class="glyphicon glyphicon-save" aria-hidden="true"></span> Download
</button>
After click, the jQuery above changed the text to "Downloaded", but I can't seem to figure out how I add style, and code, to a tag.
With jQuery:
You can change an elements html with .html()
You can change an elements styles with .css()
For changing classes, you can use .addClass() and .removeClass()
There are many more jQuery functions for DOM manipulation.
I'd suggest taking a look. jQuery API
Use .html() to apply/override HTML that is inside the element you are selecting.
You can disable buttons in a few ways. I used .attr() or you can use .prop().
$('#download-btn').click(function() {
$(this).html('<span class="glyphicon glyphicon-ok"></span> Downloaded').attr('disabled', true);
});
jsFiddle Example
I have ian:accounts-ui-bootstrap-3 installed. I want a sign-in / sign-up button in the center of my home page.
Right now, {{> loginButtons}} gives the "Sign in / Sign up" dropdown, but it's a hyperlink. How do I make the link a button?
Embedding it in html tags doesn't work:
<button type="button" class="btn btn-info"> {{> loginButtons}} </button>
What I did was to remove the ian:accounts-ui-bootstrap-3 and use instead the default accounts-ui.
Then I add the following in my js files (on the client)
Template.loginButtons.rendered = function(){
Accounts._loginButtonsSession.set('dropdownVisible', true);
};
This should show all buttons and inputs without weird dropdowns. I would then style it by replicating bootstrap styles if needed.
Hope this helps.