I followed all of the instructions for the foundation-icons-sass-rails gem including importing and precompiling the gem's assets. But, for some reason the icons are not showing on my foundation button. I will show you the line of code. What exactly am I missing here?
<button href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown [radius] zurb-button-custom"><i class="fi-[eye]"></i>Profile</button><br>
The icon for eye is:
<i class="fi-eye"></i>
Related
Security made me upgrade jQuery from 3.2.1 to 3.6.0 and bootstrap from 3.3.7 to 5.0.1 using NuGet, and to get rid of old hand-installed jQuery/bootstrap files, and now I am having some layout problems that I cannot fix.
Symptom 1
Here I got a visible button "Toggle navigation". Before, this button was invisible. The info I found on css class sr-only said that it should make invisible on a screen reader (reading screen content to a blind computer user), but I don't have a screen reader but a firefox/chrome browser. I would guess this class should show for Screen Reader Only. In any case, this button does nothing so I commented it out.
<nav>
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<!-- button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button -->
<a href="/" class="pull-left">
<img src="/Images/company_logo.png" />
</a>
<span id="span_pagetitle" class="pull-left span_pagetitle" runat="server">
Page Title
</span>
</div>
Strange still that the Chrome dev tools, under Elements, Styles, show that sr-only was handled by bootstrap.min.css, but with the new Bootstrap5 by _reboot.scss . The underscore suggests that this is a temp file, and the extension that it has to do with the higher level CSS system SCSS or SASS
In the DevTools, under Network, I still see that bootstrap.min.css was downloaded from the Content folder.
Symptom 2
In the above header code, the logo image and page title showed nicely on the same height in a light grey header bar. But after the upgrade, the layout is gone, ruined. Image and text have lowered, but with different amounts, and there is no light grey header bar as background for the image and text.
Do I need to learn SASS to fix this problem?
Or did something possibly go wrong with installing bootstrap?
To be honest, I had to manually copy the jQuery files from packages to Scripts.
I am now also wondering about jquery-ui.min.js/css and jquery-latest.min.js from a not upgraded version from package mutty-keyboard, as shown by the Network tab of DevTools. Could that cause interference with bootstrap???
Thanks for any hint that may possibly nudge me in the right direction.
Update:
While the answer on this question is actually very useful, I also found out that there is no such thing as an upgrade from Bootstrap 3 to 5. Those are just different toolkits. So this question is in a way obsolete. The real answer should be, don't upgrade. Use Bootstrap 5 on your new project.
The security scan that suggested this upgrade is doing too many upgrade suggestions, perhaps to get you scared and take your wallet out :-)
Actually, many things have changed in the newer version of the bootstrap. First, you don't need to learn SASS for this, this is only gameplay of class names that have changed in the newer versions.
For example, you have highlighted the sr-only class but in the newer version, the name of this class has changed.
Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable
The only thing you have to do is go through this documentation and your all problems will be solved.
Also, in the newer version, there is no need for jQuery.
Read all about Bootstrap version migrations in these document - https://getbootstrap.com/docs/5.0/migration/
I never had this kind of problem - and I don't know why..
some icons are missing and appearing blinking with "?/!"
what is happening?
Its a submit button. I have the same icon in another button - and it's ok there.
<button type="submit" id="submit"
class="btn btn-inv btn-lg" style="--h: #822584"
onclick="javascript:document.getElementById('classid').value='WAI-04'">
<i class="fa fa-thumbs-o-up"></i> SIGN!
</button>
any idea?
tks!!
If you are using the newest version of Font-Awesome, fa is no longer a valid class. It has been replaced with fas (solid), and fab (brands). For a thumbs up, you would use:
<i class="fas fa-thumbs-up"></i>
Here is the documentation if you want to learn more.
For collapse/expand icons curretnly I have this in my Razor code:
<span class="glyphicon glyphicon-minus"></span>
So it has the "+" and "-" icons that my JS uses to toggle between them.
Now I want to use Up and Down arrows, how can I use FontAweosme up and down arrows?
I think this would work:
<span><i class="fa fa-angle-up"></i></span>
<span><i class="fa fa-angle-down"></i></span>
To replace "Glyph Icons" with "FontAwesome"
Visit: https://fortawesome.github.io/Font-Awesome/get-started/ and follow instructions.
Icon-font replacement and custom font glyphs
If you're looking for in depth control over custom fonts and glyph-class-names, see these answers: How to create custom font icons?
I have this simple thing to do in angularjs that require a bit of dom manipulation, and i think it suppose to be a directive of some kind but i have no idea how to approach it.
I have this simple button: (html)
<button class="btn btn-success" style='margin-bottom:17px' style='margin-right:5px;' ng-show='pageToShow < pages.length-1' ng-click='changePage("next")'>
<span class="glyphicon glyphicon-arrow-right" style='margin-right:5px' aria-hidden="true"></span>Next
</button>
When i click it, i want inside of it, instead! of the glyphicon, a moving gif, like this:
1) How to remove the already existing img inside of the button and replace it?
2) I want to have other types of spinners, not the rounded one, how can i change the default spinner?
How can i do so?
Check out this directive, it does exactly what you want:
(offine)
And a demo:
(offline)
You can change the classes of the button-prepend="" and spinner-icon="" to a css-class that defines your own spinners/gifs.
You can create your own loading gif with http://www.ajaxload.info. Then, use ng-show to determine if the gif or icon should be visible.
<button ng-click="loading = !loading;" class="btn btn-success">
<img ng-show="loading" src='http://i.imgur.com/1HDbs9b.gif' />
<span ng-show="!loading" class="glyphicon glyphicon-arrow-right"></span>
Next
</button>
http://plnkr.co/edit/6N4x5bZyiilV2GMqCP48?p=preview
I am updating an Angular app to use Bootstrap 3 glyphicons instead of some images, and have run into the following difficulty:
I have this glyph in a view that's in my content section:
<i class="glyphicon glyphicon-play"></i>
and this one in a pull-down menu:
<i class="glyphicon glyphicon-log-out"></i>
It seems that when I pull down the menu, the "-play" glyph is not hidden and still shows through it.
I'm not 100% sure what the issue is without seeing more of your code, but you could add some quick jQuery to show/hide the appropriate icon on click.
$('.the-dropdown').on('click', function() {
$('i.glyphicon-play').hide();
});