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.
Related
So, I've read and tried almost all the Stack Overflow answers on the first 5 pages of google, and I can't figure out what is actually going on.
So, this is a screenshot of what my navigation bar is showing. As you can see the square on the right is actually supposed to be this icon here. When the blog link is clicked it is supposed to change to this icon here. See screenshots below for examples.
For a working example of what I'm trying to accomplish you can visit this link here, which is directly off of StartBootstrap.com, which is a live demo template. Except where the demo site says "Pages" instead of "Blog" like my website. You can find the full GitHub Repo Here for the Template.
So I've copied their code, I've added Font Awesome via CDN, I've added it using their new Kit's Script tag, I've even downloaded it and included the /css/all.min.css and /webfonts folder into my site and it still isn't working.
Here's my code:
Sidebar.blade.php
<!-- Sidebar -->
<ul class="sidebar navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fab fa-blogger-b"></i>
<span>Blog</span>
</a>
<div class="dropdown-menu" aria-labelledby="pagesDropdown">
{{-- <h6 class="dropdown-header">Login Screens:</h6> --}}
<a class="dropdown-item" href="#"><i class="far fa-newspaper"></i> Posts</a>
<a class="dropdown-item" href=""><i class="far fa-list-alt"></i> Categories</a>
{{-- <div class="dropdown-divider"></div> --}}
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<i class="fas fa-fw fa-chart-area"></i>
<span>Stuff</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tables.html">
<i class="fas fa-fw fa-table"></i>
<span>Tables</span>
</a>
</li>
</ul>
Relevant CSS for the Sidebar
.navbar-nav .form-inline .input-group {
width: 100%;
}
.navbar-nav .nav-item.active .nav-link {
color: #fff;
}
.navbar-nav .nav-item.dropdown .dropdown-toggle::after {
width: 1rem;
text-align: center;
float: right;
vertical-align: 0;
border: 0;
font-weight: 900;
content: '\f105';
font-family: 'Font Awesome 5 Solid' !important;
}
.navbar-nav .nav-item.dropdown.show .dropdown-toggle::after {
content: "\f107";
}
.navbar-nav .nav-item.dropdown.no-arrow .dropdown-toggle::after {
display: none;
}
.navbar-nav .nav-item .nav-link:focus {
outline: none;
}
.navbar-nav .nav-item .nav-link .badge {
position: absolute;
margin-left: 0.75rem;
top: 0.3rem;
font-weight: 400;
font-size: 0.5rem;
}
This website is being designed in Laravel. However this is actually a Laravel Package Development and not an actual Laravel Web Application. So this code is being symlinked into my actual website. Not that it should be of any difference.
So, what am I missing here?
Edit 1
Reference links I've tried:
FontAwesome icons not showing. Why?
Font Awesome not working, icons showing as squares
Font Awesome in CSS pseudo elements not showing
Font Awesome 5 on pseudo elements shows square instead of icon
Font awesome is not showing icon
https://www.hanselman.com/blog/WhyDoMyFontAwesomeIconsShowUpAsBlankSquares.aspx
Edit 2
I think this is not a duplicate question, as the answers for all the other questions have suggested to do some of the following which I have done.
Change the font-family to "Font Awesome 5 Free", "Font Awesome 5 Solid", etc.
Chance the font-weight to 900, bold, 400, etc.
Include Font Awesome via CDN, direct download via the "Hosting Font-Awesome Yourself" page, etc.
Tried changing the pseudo from after to before.
So while this is a "duplicate question", none of the answers from all the same question or type of question work for my specific case.
I'm also adding a link to my full package repo as it sits right now, and the Laravel web application repo as well.
Edit 3
The admin.css file is now correct in the GitHub repo, and the relevant code starts at line 10626.
(Posted on behalf of the question author, to move it from the question to the answer section).
Problem has been solved. This whole issue was due to using an outdated version of Font-Awesome. So for anyone who is running across this issue, please make sure that you are using the most current version of Font-Awesome!
Categories and Tables are fixed by using fa fa-list-alt and fa fa-fw fa-table.
you need to use "Font Awesome 5 Free" as font-family (if you're using the free version)
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
Did you try to give the specific element a font-weight: bold; ?
In case of a fas a font-weight bold fixed it sometimes.
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 imported all the font awesome css into my website using the following link code:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link href="content/css/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="content/css/theme.min.css" rel="stylesheet" />
<link href="content/css/WDWStyles.css" rel="stylesheet" />
And then added the icons using:
<p>Find me at:</p>
<a class="btn btn-primary"><span class="fa fa-twitter"></span> Twitter</a>
<a class="btn btn-primary"><span class="fa fa-github"></span> Github</a>
<a class="btn btn-primary"><span class="fa fa-linkedin"></span> Linked in</a>
My custom CSS is:
#font-face {
font-family: 'headline_onehplhs';
src: url('fonts/HEADOH__-webfont.eot');
src: url('fonts/HEADOH__-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/HEADOH__-webfont.woff2') format('woff2'),
url('fonts/HEADOH__-webfont.woff') format('woff'),
url('fonts/HEADOH__-webfont.ttf') format('truetype'),
url('fonts/HEADOH__-webfont.svg#headline_onehplhs') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-image: url('../images/background.jpg');
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.heading {
background-color:#FFF;
font-family: 'headline_onehplhs';
font-size:3.5em;
margin-left:50px;
margin-top:50px;
padding:20px;
color:#000;
}
.heading span, .main span {
background-color:#FFF;
font-family: 'headline_onehplhs';
color:#999;
font-size:0.5em;
display:block;
}
.main span {
font-size:1.75em;
}
.main {
background-color:#FFF;
margin-left:50px;
margin-top:25px;
padding:20px;
text-align:justify;
}
My directory is laid out as follows:
css > font-awesome > [font awesome folders]
And the container that I'm using has the class name "main"
But the icons still display as square boxes - is there something I'm missing?
Try to use <i class="fa fa-twitter"> rather than <span class="fa fa-twitter">
On the official doc:
After you get up and running, you can place Font Awesome icons just
about anywhere with the <i> tag.
It also says:
You can place Font Awesome icons just about anywhere using the CSS
Prefix fa and the icon's name. Font Awesome is designed to be used
with inline elements (we like the <i> tag for brevity, but using a
<span> is more semantically correct).
Although it sounds like using <span> is also acceptable, but it does not work correctly in some cases, so stay with <i> is a safer plan.
Use this instead:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
If that fixes your problem, then you either didn't upload the fonts in the correct directory or you are referencing them incorrectly.
Here is a test showing the minimum code required to use font awesome:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
Noone has mentioned the font folder in relation to the fonts. Think like why in you have to put ../ in front of background image to let it know that the img Is not contained in the CSS folder. Check the font-awesome.css file and see where it Is referencing the fonts.
Maybe like this?
HTML link
<link href='content/css/font-awesome/css/font-awesome.css?family=font+awesome' rel='stylesheet' type='text/css'>
CSS
fa{
font-family: 'font awesome';
}
Source: similar use
http://www.google.com/fonts#QuickUsePlace:quickUse
in AspNetCore (.net 7), I had this problem showing a box instead of the fontawesome icon. I'm using NPM to gulp the package and copy to wwwroot/css/fontawesome. After adding the correct links to the _Hosts.cshtml everything looks good.
<link href="/css/fontawesome/css/fontawesome.css" rel="stylesheet" />
<link href="/css/fontawesome/css/solid.css" rel="stylesheet" />
In development mode, I noticed 404 on the webfont files. After more research, I found that the mime types were not configured properly. Adding the following to program.cs, the problem is solved:
app.UseHttpsRedirection(); //Existing
// Set up custom content types - associating file extension to MIME type
var provider = new FileExtensionContentTypeProvider();
// Add new mappings
provider.Mappings[".ttf"] = "font/ttf";
provider.Mappings[".woff"] = "font/woff";
provider.Mappings[".woff2"] = "font/woff2";
app.UseStaticFiles(new StaticFileOptions
{
ContentTypeProvider = provider
});
app.UseRouting(); //Existing
When I hover on font-awesome's icons (when they're stacked together) like below (see picture). I get these strange underlines. Any idea where they could come from?
Source:
<div class="text-center">
<!-- FB -->
<a href="http://www.facebook.com/share.php?u=${shareURL}" target="_blank" style="color : #555">
<i id="facebook" class="fa-3x fa fa-facebook-square"></i>
</a>
<!-- Twitter -->
<a href="http://twitter.com/?status=Sign-Up+for+SolidTranslate+here!:+${shareURL}+#SolidTranslate" target="_blank" style="color : #555">
<i id="twitter" class="fa-3x fa fa-twitter-square"></i>
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=${shareURL}&title=Sign-Up%20for%20SolidTranslate%20here:%20${shareURL}&summary=To%20get%20started%20translating%20SolidWorks%20files%20register%2\
0here:%20${shareURL}&source=${shareURL}"
target="_blank" style="color : #555">
<i id="linkedin" class="fa-3x fa fa-linkedin-square"></i>
</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=${shareURL}" target="_blank" style="color : #555">
<i id="googleplus" class="fa-3x fa fa-google-plus-square"></i>
</a>
</div>
Those lines usually come from the default (underline) a element style.
Either use another element or remove the underline :
a.social { /* or whatever your class */
text-decoration: none;
}
"text-decoration: none;" needs to be set with the ":hover" selector on the "a" tag, like this...
a:hover {
text-decoration: none;
}
Fontawesome great and fun. But if you are using it as font, this is expected behaviour.
Add text-decoration to every state.
If you don't add :link it will show purple underline, very hard to see but it is there.
If you don't add :active it will show red underline when clicking, very visible.
a:hover, a:focus, a:active, a:visited, a:link{
text-decoration: none;
}
Remove text-decoration for hover effect on all fa class objects:
.fa:hover {
text-decoration: none;
}
Assuming you are using a tags
text-decoration: none;
It may also be necessary to use the important keyword in your class definition
text-decoration: none !important;
Well, I had the exact same problem, and it turned out that what was causing mine was a background change on hover effect I had set to my container. I just had to change the selector to a class selector and everything was fixed!
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.