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.
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
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 want to add a tooltip which would be displayed on mouse hover of the below elements.
<a ng-click="click(this)">
<span class="icon"></span>
</a>
{{product.title}}
I have the tooltip in product.desc.
I tried using the below code:
<span tooltip="{{product.desc}}" class="glyphicon"></span>
But this doesnt work.
Any Ideas/Suggestions? please help.
[EDIT] I can see the value of product.desc exists as expected in source of the page when i checked using developer tools.
Thankyou
Instead of
<span tooltip="{{product.desc}}" class="glyphicon"></span>
we need to give
<span data-toggle="tooltip" title="{{product.desc}}" class="glyphicon"></span>
None of the answers above solved my problem. This is what worked for me:
Instead of
<span data-toggle="tooltip" title="{{product.desc}}" class="glyphicon"></span>
we need to say:
<span data-toggle="tooltip" data-original-title="{{product.desc}}" class="glyphicon"></span>
Which version of angular are you using? A couple of things could be happening... I've spent the past 9 months developing angular apps all of which have leveraged the tooltip library.
Assuming you are using the tooltip library from angular-ui
Make sure you are referencing the angular-ui module in your in app.js module dependencies
angular.module('ValuesEntryApp', ['ui.bootstrap', ...more depedencies,]).config(funciton(){...});
Angular 1.3 has a known issue with angular-ui tooltips: issue/solution
Other things: You said that even if you use the title tag it still doesn't render a tooltip? I think it depends on what browser you use but I know atleast in chrome that if you hover and hold over an element with a title it will display the title for a short while. Is your glyphicon even rendering on screen?
Are there any errors in your console? Give us more info if you still seeking help. I could help get it working for you if we had more info on you dev setup.
How can I get the Glyphicon to show up on the same row and left to the links, and not over the link as it does now? Whitout the glyphicon becoming a part of the link?
Here is the code:
<span class="glyphicon glyphicon-exclamation-sign"></span>
<a href="http://www.somewebsite.com/" target="_blank">
<h4><b>Some website</b></h4>
</a>
This syntax should get you what you are looking for:
<h4><span class="glyphicon glyphicon-exclamation-sign"></span> Some website</h4>
From the Twitter Bootstrap documentation talking about Glyphicons, it reads there to add a nested span tag and apply the icon classes to the span tag. Here's a link to the Twitter Bootstrap documentation on Glyphicons: Twitter Bootstrap documentation
It would help if you added the css styles already in effect to the question.
But in general, if the glyphicon is covering the link, you could add left margin to the link. The margin part wont be clickable.
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