By using bootstrap I would like to display green and red labels which context is like a v or a x.
The v should be green and the x should be red.
I wrote the following code, but I would like to have a better effect.
<span class="badge badge-success">V</span>
<span class="badge badge-important">X</span>
Any ideas how should I get it by using bootstrap?
Here is an example of what I would get by using bootstrap labels and badges.
If you used font-awesome (http://fortawesome.github.com/Font-Awesome/) in combination with Twitter bootstrap (which it's designed for), you would be able to do something like this:
<i class="icon-ok-sign" style="color: green; font-size: 18pt;"></i>
<i class="icon-remove-sign" style="color: red; font-size: 18pt;"></i>
<br/><br/>
<i class="icon-ok-circle" style="color: green; font-size: 18pt;"></i>
<i class="icon-remove-circle" style="color: red; font-size: 18pt;"></i>
<br/><br/>
<i class="icon-ok" style="color: green; font-size: 14pt;"></i>
<i class="icon-remove" style="color: red; font-size: 14pt;"></i>
Which would output this:
Or you could use CSS classes defined elsewhere to style them appropriately.
Font-awesome is based upon SVG images and they scale to any size (within reason and use).
You can now also subset the icons you need rather than including them all by default using icnfnt.
Related
I added the following style to the code below :
style="display: inline-block; background-color: transparent; background-image: none; font-family: fontAwesome; content: "\f0c9";"
Code:
<li class="treeview">
<a href="#">
<i style="display: inline-block; background-color: transparent; background-image: none; font-family: fontAwesome; content: "\f0c9";" class="fa fa-dashboard"></i> <span>Exit</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu" id="sign_Out">
<li class="active"><i class="fa fa-circle-o"></i>Exit</li>
</ul>
</li>
The font-awesome file is defined in the css style , Why does not the icon appear?
Error in Inspect google chrome : "invalid property value" and on the content word , line is drawn
Well, you should use the following to import font awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
For more details about how to use icons check the following link:
https://www.w3schools.com/css/css_icons.asp
EDIT:
in 4.7 version a circle appear, however moving to 5.7 version made the circle disappear so you should be careful what version you using
"\f0c9" is breaking the inline style declaration since it is already wrapped in double quotes. Using '\f0c9' should help.
I want to put my font awesome icon and text paragraph into one line. How can I fix this code?
<div class="date" style="display: inline-block;">
<i class="fa fa-user-o" aria-hidden="true" style="float: left;"></i>
<p style="display: inline-block; text-align: right;float: left;" >10/01/2018</p>
</div>
Julia, remove all your floats:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="date">
<i class="fa fa-user-o" aria-hidden="true"></i>
<p style="display: inline-block" >10/01/2018</p>
</div>
Also you might make it this way:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="date">
<i class="fa fa-user-o"> 10/01/2018</i>
</div>
If your currently used font of the website has Icons Cheatsheet then you can have a set of icons of the third party. Here I would like to introduce “Font Awesome Icons”. This is a good-looking and popular set of icons.
To use this set, you need to add this code to the head section in your website (via OIW Blog):
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
– After adding CSS, you can use this code to put in the HTML which shows icons (you can apply this method to the part you use Cheatsheet of the font as mentioned above. Some fonts have unique way of using)
<i class="fa fa-user-o"></i>
If you don’t want the code in the HTML, you can just use CSS. With CSS you need to find the Class or ID of the part that displays icon and after that use the below CSS code to display it. Here I display the EDIT icon of the third party “Font Awesome Icons” before (::before) the title, along with 2 properties of padding-right and font-style (you can also display it after the title by using after property): #ohiwill
.date .fa::before {
font-family: "FontAwesome";
content: "\f044";
padding-right: 5px;
font-style: normal;
}
I've a div with text in div.But the weird behavior occurs when glyphicon is added,that is spacing between the words has become more.
How to avoid this ?
<div class="glyphicon glyphicon-chevron-up">With glyphicon</div>
<div>Without glyphicon</div>
Demo of the issue
Demo of Implementation in my application
This one works...
<div class="glyphicon glyphicon-chevron-up"></div>With glyphicon
<div>Without glyphicon</div>
If you can't use this then use this one :
<div class="glyphicon glyphicon-chevron-up" style="color: steelblue;font-size: initial;" data-toggle="collapse" href="#new"></div><span style="color: steelblue;font-size: initial;" href="#new">
Glyhicon div with collapse</span>
<div class="collapse in" id="new">
Something goes here
</div>
Then you only have option to click on icon to toggle.
You can add a span for the Glyphicons
<div><span class="glyphicon glyphicon-chevron-up"></span>With glyphicon</div>
<div>Without glyphicon</div>
It works well and its a good practice to add a separate span for the glyphicons.
What is happening in your code is that the glyphicon class property is being applied to the content that you are writing within the div tag.
glyphicon class applies the font-family : 'Glyphicons Halflings' in which the symbol can be rendered. But you have added your text inside same <div>. So that font will be applied to your text too. I have moved the text to another <span> and applied the desired font-family : 'sans-serif' to the text.Which solves the issue OR simply move your text out of that <div>, that too will work
With glyphicon
Without glyphicon
New Class
.newFont{
font-family: sans-serif
}
JdFiddle
If you want to avoid the text and you want to write text inside glyphicon you should add to bootstrap glyphicon class the before attribute so it gives effect only to the before like this :
/*add the :before to glyphicon */
.glyphicon:before {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I have 3 font-awesome icons side-by-side in a dev tag. On mobile there were a bit too small. I put this in my code but this specific icon doesn't change size?
<i class="fa fa-heart fa-2x"></i>
And here's how they look:
CSS:
hover-info .fa .fa-heart {
font-size: 2em;
}
This is working in my browser:
.fa-heart {
font-size: 4em;
}
Maybe your reference to 'hover-info' is causing the issue.
NOTE: your 'css' file has to be loaded after fontawesome.
Another option if you don´t want to define a css class, is this way:
<font size="8"> <i class="fa fa-facebook"></i> </font>
Then it only remains to change the number of the font tag.
In my case this worked very well, I hope that in yours too.
Regards
http://jsfiddle.net/cirosantilli/aZ9g4/3/
The stacked "GitHub Issue" icon is twice as large as the other fixed width non stacked ones, and makes my nav look bad.
Is there a way within the library to make it be the same size without hacking low level CSS properties?
If only there was a fa-stack-half...
If not, what is the best workaround?
Looking at the examples for stacked icons, you can do this by modifying the font-size on the span:
Just add a rule like:
.fa-sm {
font-size:0.63em;
}
With Markup:
<span class="fa-stack fa-sm">
<i class="fa fa-exclamation fa-stack-1x"></i>
<i class="fa fa-circle-o fa-stack-2x text-danger"></i>
</span>Github Issue
Fiddle: http://jsfiddle.net/epxtY/
Try adding this CSS
.fa-stack{
width: 1.28571em;
}
.fa-circle-o.fa-stack-2x {
font-size: 1.4em;
top: 2px;
}
.fa-exclamation.fa-stack-1x{
font-size: 10px;
top: -3px;
}
http://jsfiddle.net/aZ9g4/12/