-
assigned issue to
Info 3bits
Fixed Width FontAwesome Icons not working (missing LESS/SASS)
Issue #288
resolved
Not a bug, but as both theme "Elegance" and "Adaptable" are based on bootstrap, Fixed Width Icons (from FontAwesome) doesn't works in Adaptable. It may be missing LESS/SASS - or whatever applies.
Comments (11)
-
-
Are you adding the icons to a HTML block?
In that case, add fa-fw to the icon class to fix the width.
If not, I would need more info about the issue. is it a block, activity, resource,..?
-
- changed status to resolved
-
reporter
It's HTML block, and have been using with FA-FW, that is why showing on Elegance, neither on essential theme or adaptable. Just pulled down the latest fix from bitbucket to see if it's changes, and as well re-added FA code, shows same issue. Cleared caches twice.
-
Adaptable loads the FA CSS directly from the CDN eact time and the CSS code is the default and the same used in Essential. Elegance has a modified version but I don't think that could the problem.
Can you post the code to replicate the exactly the same block and verify it?
-
reporter
Hi, as of now I am using the exact same code as published on FA site
<div class="list-group"> <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a> <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a> <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a> <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a> </div>
and it's coming like this
This same issue is with essential, but thinking that Essential isn't based on bootstrap theme, so may be issue there, as FW code is working perfectly in Bootstrap and Elegance, whilst Adaptable as well requires Bootstrap, should have worked here fine too.
-
Essential and Clean display the content in the same way Adaptable does.
Not an issue. Probably Elegance has other CSS for it. Try to add a <br> to each line.
-
reporter
adding <br> does brings icons to separate lines, but doesn't forms the FW icons, this could have been done without using FW parameters as well. If it doesn't works, leave it as I will remove FW links from the site also not many people may be using that for if that would have been the case, then you'd got plenty other people asking for it.
-
If you add a <br> tag after the </a> then you can get the desired result:
-
reporter
That is what I achieved earlier, but this can as well be done without using Full Width tag, the fine lines between icons aren't there and they do not extend to the width of the HTML block. But anyway, I have removed the FW icons from the test site not to be used where it doesn't work, only concern is why it didnt worked where it should considering it's bootstrap theme.
-
BootstrapBase doesn't includes the default list-group while Bootstrap theme include it.
I can add it to Adaptable but should be included in Bootstrapbase. So IMO, it is a BootstrapBase bug.
- Log in to comment
