I have a grails application and I integrated Bootstrap 3.
Everything is working fine except the glyphicons are not displayed/shown in my page.
I have the following code in my login page.
<div class="input-group">
<span class="input-group-addon ">
<i class="icon-user icon-color"></i>
</span>
<input type="text" class="form-control " placeholder="Username" required="required" />
</div>
and what is displayed in my page is:
[The orange circle indicates where the glyphicon should have appeared/displayed]
CSS:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
My folder structure
I added /fonts/* in Config.groovy like
// What URL patterns should be processed by the resources plugin
grails.resources.adhoc.patterns = ['/images/*', '/css/*', '/js/*', '/plugins/*', '/fonts/*']
Error shown in Google Chrome (F12)
The spring-security's rule may not be configured on Config.groovy :), see:
grails.plugin.springsecurity.controllerAnnotations.staticRules = [
(...)
'/**/fonts/**': ['permitAll'],
(...)
]
Finally, I found the solution!
I added the following line to Config.groovy and the Glyphicons are not being displayed.
grails.resources.adhoc.includes = ['/images/**', '/css/**', '/js/**', '/plugins/**', '/fonts/**']
I had already added /fonts/* in Config.groovy like
// What URL patterns should be processed by the resources plugin
grails.resources.adhoc.patterns = ['/images/*', '/css/*', '/js/*', '/plugins/*', '/fonts/*']
but now, grails.resources.adhoc.includes is added.
you can take https://github.com/glancekit/glance as an example.
It works with grails 2.3.8 and Bootstrap 3. All Glyphicons are displayed correctly in glance.
-markus
It looks like your syntax might be wrong.
I'm not sure about the user-color icon but for user-icon I believe the classes should be:
<i class="fa fa-user"></i>
This assumes you're using the latest version of Font Awesome. If you're using Foundations Icon Fonts 3, the class name should start with an fi- prefix. And for BS3 it should be:
<i class="glyphicon glyphicon-cog"></i>
It should be using span:
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
reference: http://getbootstrap.com/components/#glyphicons-how-to-use
Related
I'm not that experienced with css and webprogramming to start with.
I want to enable the Content-Security-Policy header for my site but it warns me about a couple of lines for using inline stuff.
The lines looks like this:
<li><i class="fa fa-phone"></i></li>
<li><i class="fa fa-facebook"></i></li>
I'm trying to figure out how I would move the style= parameter to the css stylesheet.
In the CSS-file, can I just add something like this?
facebookbutton {
background: #2e39a4
}
phonebutton {
background: #9fa6ac
}
And then do something like this?
<li><a href="contakt" style="css-file-somehow" .....
Or is this done in a totally different way?
In HTML The tag will have class attribute
<i class="fa fa-facebook"></i>
The Class will have styles defined in CSS like below
.facebookbutton{
background:#2e39a4;
}
I have a website, setup with webpack. I added Font Awesome Pro and configured the global token for it. So the Pro Icons are working.
But some doesn't, like fa-github or fa-twitter. And these are actually even free icons. A few days ago they worked.
Here's my code how I set everything up:
Package.json:
"dependencies": {
"#fortawesome/fontawesome": "^1.1.5",
"#fortawesome/fontawesome-free-brands": "^5.0.9",
"#fortawesome/fontawesome-pro-light": "^5.0.9",
"#fortawesome/fontawesome-pro-regular": "^5.0.9",
"#fortawesome/fontawesome-pro-solid": "^5.0.9",
"#fortawesome/fontawesome-pro-webfonts": "^1.0.5",
}
main.scss:
$fa-font-path: "~#fortawesome/fontawesome-pro-webfonts/webfonts";
#import '~#fortawesome/fontawesome-pro-webfonts/scss/fontawesome.scss';
#import '~#fortawesome/fontawesome-pro-webfonts/scss/fa-light.scss';
webpack:
resolve: {
alias: {
'#fortawesome/fontawesome-pro-solid$': '#fortawesome/fontawesome-pro-solid/shakable.es.js',
'#fortawesome/fontawesome-pro-regular$': '#fortawesome/fontawesome-pro-regular/shakable.es.js',
'#fortawesome/fontawesome-pro-light': '#fortawesome/fontawesome-pro-light/shakable.es.js'
}
},
<i class="fal fa-check"></i> // Does work
<i class="fal fa-github"></i> // Does not work
<i class="fal fa-twitter"></i> // Does not work
What am I missing? Do I have to import another CSS file for these? I didn't find any.
Edit: Added photo of folder structure:
Alternatively,
You can import Font Awesome icons the Javascript way.
import fontawesome from '#fortawesome/fontawesome'
import brands from '#fortawesome/fontawesome-free-brands'
fontawesome.library.add(brands)
You will need the #fortawesome/font-awesome-pro-brands package for this.
Use <i class="fab fa-github"></i> and <i class="fab fa-twitter"></i>
You cannot use fal for the class since there are no social icons in the font-awesome-pro-light set.
See: https://fontawesome.com/icons?d=gallery&q=github&s=light
Here is my dropdownbutton:
<xp_1:dropDownButton id="dropDownButton1">
<xp_1:this.treeNodes>
<xp_1:basicContainerNode styleClass="btn-primary" label="Tools">
<xp_1:this.children>
<xp_1:basicLeafNode label="Edit">
</xp_1:basicLeafNode>
<xp_1:basicLeafNode label="New">
</xp_1:basicLeafNode>
<xp_1:basicLeafNode label="Home">
</xp_1:basicLeafNode>
</xp_1:this.children>
</xp_1:basicContainerNode>
</xp_1:this.treeNodes>
</xp_1:dropDownButton>
How to add glyphicon to the main dropdown button?
Adding a span somewhere inside just doesn't work like for core button:
<xp:button id="button2" styleClass="btn btn-success" value="Save" title="Save">
<span class="glyphicon glyphicon-floppy-disk"></span>
</xp:button>
Once you add code in your button, i.e. an eventHandler, you can add the icon there. Here is a button I have that includes a Font Awesome icon, but Glyphicons work the same way. Once you create the button and actions, go into the source code and add the icon as below:
<xp:button
value="Submit"
id="btnSave"
styleClass="btn btn-primary"
>
<i
class="fa fa-check"
aria-hidden="true"
></i>
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete"
>
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument
var="currentDocument"
></xp:saveDocument>
<xp:openPage
name="#{sessionScope.lastPageName}"
></xp:openPage>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
UPDATE
I did some tests, and while you can't add the icon the way we both want to, you can use CSS. I used a page with one dropdown button, and added CSS :before to add the icon within the button:
button::before {
font-family: "Glyphicons Halflings";
content: "\e172";
}
You may have to play with the CSS a little but hopefully, this can help.
How do I properly Alisas a font awesome class such as fa fa-users to user ?
I am developing an Ext application, and I need to use font awesome icons, the following works for me:
<i class="fa fa-users"></i>
However the icon to use is database result driven, hence I wish to use an alias class for fa fa-users, then I can switch classes dynamically. How do I do this.
Already tried:
Method 1
CSS:
.user
{
font-family: FontAwesome;
content: "\f095";
}
Method 2
Jquery Approach to alias class
$document.ready(function(){
$('.users').addClass('fa fa-users');
}):
In both cases using as:
<i class="user></i>
But no icon appears, I just cant figure out what I am missing.
you have to addClass to i instead
$('.users i').addClass('fa fa-users');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<div class="users">
<i></i>
</div>
In the application I am working on, we can add the following markup for the pictured result
<span class="cell-inner-undefined">
<span title='Not defined' class="status pl-undefined" ></span>
</span>
Inside the relevant CSS we have the following:
.pl-undefined:before {
content: "";
color:#969696;
}
The item assigned to content looks like unicode. Instead of that I want to get the result of the following:
<span class="fa-stack fa-5x">
<i class="fa fa-info-circle fa-stack-1x" style="color:blue" ></i>
<i class="fa fa-ban fa-stack-1x" style="color:red"></i>
</span>
How can I get the class 'pl-undefined' to return the FA icon generated above?
p.s: Adding the fa span in my page displays the desired icon, but I need it to be displayed using the class.
I didn't find any other way of achieving this, other than adding a javascript which will find a <span class="cell-inner-undefined"> and replace it with the fa CSS