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>";
Related
I'm doing a form with bootstrap and html, and i'm using glyphicons but for some reason those doesn't work
<label>Colaboración Internacional <span class="glyphicon glyphicon-user" style="font-size:24px;"></span> </label>
But it only appears something like a blank square
Do you import the Glyphicons libray in your page, best way to check is to inspect the span
if you see some :before with content and code, it OK, if not you need to include it in your imports
I have a "migrated.html" page in root directory. How do I add that link to this CSS style button?
<button onclick="#" Migrated</button>
The above html code didn't work for me.
Here is the link to the code set:
https://codepen.io/prateek-vishwas/pen/Rwwpzjo
There are a few different ways to accomplish this.
But, from what I understand, it sounds like you just want an anchor <a> tag with a href attribute that is styled like this button.
You can simply just set the same class on the anchor tag that is on the button, so you should receive
<a href = "url-to-ur-page" class = glossy-button glossy-button--red>Migrated</a>
Why it has to be a button ? Why not use the normal "A" tag and style him like a button ?
<a href="migrated.html" class="glossy-button glossy-button--red">!!!Migrated!!!
</a>
Works in your codepen - ijust moved the migrated text inside the tag
This will work even without javascript.
Anyhow.the js to change the current url is
window.location = 'your url';
<button onclick="window.location='migrated.html';">
Migrated
</button>
which also work in your pen
How to insert glyphicon icon in my website. Now I'm trying to put icon in my website but not fixed
Without a part of your code we can't be really helpfull.
However, to me it looks like you forgot to use the property #font-face.
See the doc:
https://developer.mozilla.org/fr/docs/Web/CSS/#font-face
When using Bootstrap, use a span with the class 'glyphicon' and another class specified for each icon, like so:
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Here you can find all icons Bootstrap is currently offering.
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'm new to jQuery Mobile and I'm trying to figure out how exactly to customize buttons. Which classes do i have to use to access certain css properties?
For instance I know that if you want to change the background color of a button you write .ui-btn-inner {background: white;}. But when I do it this way it doesn't work out all the time.
I already looked on the jQuery Mobile API website but I can't seem to find anything that really explains this concept in depth.
If someone could provide me with a website or an explanation about these classes that would be much appreciated.
You can inspect the html to see what jQuery mobile buttons look like.
For a basic button, created by:
Link button
the output looks like:
<a href="index.html" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Link button</span>
</span>
</a>
Create and load a custom CSS file after the jQuery mobile css.
Here you can override individual css classes, like
.ui-btn-inner {
// !important does the trick
background-color: #FF0 !important;
...
}
You sometimes might have to add !important to the css in order to override jQuery mobiles CSS. But I actually do not know when this is necessary, I just do it if it does not work without...
You can look up the structure of all elements in the jQuery mobile CSS, or, as i mentioned before, use the web inspector to see what jQuery turns your markup into.
PS
A more in-depth look at how the CSS works, is provided here