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.
Related
Im using this css to get fontawesome glyphs as list-item markers - ive used this in plain vanilla (non WordPress sites before without issue:
ul#lene-pages-list, #lene-pages-list li {
padding : 0;
margin : 0;
list-style : none;
}
ul#lene-pages-list {
margin : 2em 0;
}
#lene-pages-list li {
margin : 1em;
margin-left : 3em;
}
#lene-pages-list li:before {
content : '\f005';
font-family : 'FontAwesome';
float : left;
margin-left : -1.5em;
color : #0074D9;
}
The result is small boxes displayed where the glyph should be indicating the code is not recognised ive tried about twenty different codes from Fontawesome 4.x which is installed and working everywhere else on the site (including the same page) so i know Fontawesome is supported and installed ok.
Ive read on the Fontawesome site here that you adopt a pure html inline approach thus:
<ul class="fa-ul">
<li><span class="fa-li"><i class="far fa-star"></i></span>C#</li>
<li><span class="fa-li"><i class="far fa-star"></i></span>PHP</li>
<li><span class="fa-li"><i class="far fa-star"></i></span>ASP</li>
<li><span class="fa-li"><i class="far fa-star"></i></span>Cold Fusion</li>
<li><span class="fa-li"><i class="far fa-star"></i></span>Python</li>
<li><span class="fa-li"><i class="far fa-star"></i></span>Pearl</li>
</ul>
The classes are Fontawesome specific. Wow this seems like a backward step is this still the case? im not sure how old the article is but i cant believe this is the way forward. I have over 80 pages to code by hand now to use their suggested method - isn't this exactly what css is for ... DRY
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 have a multi step form that is using UI-router. I'm wondering how i can bold the active links and keep it bolded. right now the links only get bolded when i click on them and go back to its original css when i click out of it.
html:
<div class="text-center">
<a ui-sref-active="active" ui-sref=".info"><span>1</span> Personal Info</a>
<a ui-sref-active="active" ui-sref=".events"><span>2</span> Interests</a>
<a ui-sref-active="active" ui-sref=".submit"><span>3</span> Kewl Dawg</a>
</div>
css:
a:active {
font-weight: bold;
}
here is a link to the plunkr:
https://embed.plnkr.co/PSpH6qdlm9JltgU2DAbj/
Solved:
just removed a: from the css....
ui-sref-active adds a class, your css targets the ':active' pseudoclass. use a.active in your css.
https://plnkr.co/edit/FcHpaV5ITXYqXLs0FwZL?p=preview
This question already has an answer here:
Apply style to element, only if a certain element exists next to it
(1 answer)
Closed 5 years ago.
I have a style defined that needs to be applied only if there is an icon, but not if there isn't.
The html structure with an icon is as follows:
<li class="g-menu-item g-menu-item-226 g-menu-item-type-component g-standard">
<a class="g-menu-item-container" href="/en/services/visas">
<i class="fa fa-id-badge"></i>
<span class="g-menu-item-content">
<span class="g-menu-item-title">Visas</span>
</span>
</a>
</li>
The structure without an icon is as follows:
<li class="g-menu-item g-menu-item-232 g-menu-item-type-component g-standard">
<a class="g-menu-item-container" href="/en/destinations/australia/adelaide">
<span class="g-menu-item-content">
<span class="g-menu-item-title">Adelaide</span>
</span>
</a>
</li>
The SCSS I have worked fine on items with an icon. It moves the span with the class g-menu-item-title to the right by 1.25rem and up by 1rem:
.aside-nav {
.g-menu-item-container {
.g-menu-item-content {
margin-left: 1.25rem !important;
margin-top: -1rem !important;
}
}
}
However, when there is no icon, it makes the menu items in the sidebar squished into each other.
How do I change this SCSS so that it only applies to menu items in the aside where the item has an icon, but not when there isn't an icon.
You can use an Adjacent sibling selector,
It'll let you target an element that is next to another element:
i + .g-menu-item-content {
margin-left: 1.25rem !important;
margin-top: -1rem !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<li class="g-menu-item g-menu-item-232 g-menu-item-type-component g-standard">
<a class="g-menu-item-container" href="/en/destinations/australia/adelaide">
<span class="g-menu-item-content">
<span class="g-menu-item-title">Adelaide</span>
</span>
</a>
</li>
<li class="g-menu-item g-menu-item-226 g-menu-item-type-component g-standard">
<a class="g-menu-item-container" href="/en/services/visas">
<i class="fa fa-id-badge"></i>
<span class="g-menu-item-content">
<span class="g-menu-item-title">Visas</span>
</span>
</a>
</li>
</ul>
I have used the design found at http://getbootstrap.com/examples/carousel/
I have downloaded the versions of CSS and JS used on the page:
CSS
http://getbootstrap.com/dist/css/bootstrap.min.css
http://getbootstrap.com/examples/carousel/carousel.css
Javascript:
https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
http://getbootstrap.com/dist/js/bootstrap.min.js
http://getbootstrap.com/assets/js/docs.min.js
The scrolling is working ok and my image changes are fine.
I have put the files together on a windows machine.
Any ideas as to what I am doing wrong?
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
I had the same problem when I used the carousel gallery and bootstrap. Turns out I had not included the Glyphicons Halflings fonts in my site root folder. After I created a fonts folder and copied the required font files. The square box with E079 as replaced by the left < arrow.
I was resolving issue with downloading fonts written inside bootstrap.min.css line 2464
#font-face {
font-family: 'Glyphicons Halflings';
src: url(../fonts/glyphicons-halflings-regular.eot);...
If you are seeing squares that reflect the Unicode address of the glyph, e.g. E079, you may not have properly attributed the bootstrap classes on the <span> for the icon. You need to make sure that your span contains both the reference to the glyphicon web font (e.g. glyphicon) as well as the icon you're intending to use (e.g. glyphicon-chevron-left, and glyphicon-chevron-right).
For instance, from the example referenced above, the chevron's are identified as follows:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
...
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
If the classes are the same, as you indicate in your edit, inspect the elements with a browser tool like Firebug or Chrome (or Safari's) developer tools. Here you should be able to see what classes are currently applied to the elements and determine why the fonts are not rendering correctly. The first thing to look for is whether or not the class which defines the font family for the Glyphicon Halfings font is present on the same element as the chevron spans. E.g. you want to see the following class:
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
along with...
.glyphicon-chevron-left:before {
content: "\e079";
}
Reported for the <span class="glyphicon glyphicon-chevron-left"></span> node.
If you don't see both of those, the bootstrap CSS isn't being included or read properly.
Finally, if you're still having problems I would recommend starting a new .html document and paring down the example from Bootstrap's gallery as much as possible. That way there is less markup and less going on, and as you begin to disassemble it and put it back together you may find a missing quote, or some other typo which is causing the error that you're seeing.
I too had same problem try this one:
make sure this file "your_template\less\variables.less" contains the right path.
Change path at:
"#icon-font-path: '../../plugins/system/t3/base-bs3/bootstrap/fonts/'";