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>
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 h:commandLink and I want it to look like is not clickable (i.e the link has a pale color and when you hover over it the cursor becomes not-allowed ).
I'm using the disabled attribute trying to achieve that but it doesn't perform the desired effect: the link doesn't have a pale color and when I hover over it the cursor doesn't become not-allowed. But when I click the commandLink it doesn't do anything, which is good but I'd prefer for it to have the properties previously defined.
Here's my code:
<h:commandLink onclick="function()" href="#{request.contextPath}/create"
styleClass="#{condition ? 'enabled-link' : 'disabled-link'} mar-left-8 cl-blue"
disabled="#{condition ? 'false' : 'true'}"
data-scroll-goto="0" id="show"><i class="fa fa-plus-circle" aria-hidden="true"/>
<p:ajax/>
</h:commandLink>
Apparently the disabled attribute of the commandLink turns the link into a span tag instead of an anchor tag.
So my code displays on the browser in the following fashion:
<span href="/" id="show"
name="show"
class="disabled-link mar-left-8 cl-blue">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</span>
And the reason why the disabled-link class wasn't making any effect is because I was missing this peace of code on the css:
span.disabled-link {
cursor: not-allowed;
opacity: 0.5; }
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
This is my component:
{{#link-to routeName class="list-group-item"}}
<i class="fa {{icon}} fa-fw"></i> {{text}}
{{/link-to}}
Which I use:
<div class="list-group">
{{icon-link routeName="my-account" icon="fa-user" text="Personal details"}}
...
</div>
The expected html is:
<div class="list-group">
<a class="list-group-item" href="xxx">
<i class="fa fa-user fa-fw"></i> Personal details
</a>
...
</div>
But because ember wraps the components in a div, the bootstrap rules do not apply anymore and the list-group has a wrong style.
If I change the component tag to a, and remove link-to from the component template, I loose the flexibility of link-to - and I do not know how to set attributes (href, class) in the containing tag.
It seems I can not use an Ember component for this then? Or is there a way to tellink ember no to wrap my component in a div, or anything else really: in order for the CSS to work, the markup structure must not be modified.
I've not tried this myself but apparently you can create custom link-to components by extending Ember.LinkComponent. Something like this might work...
// app/components/icon-link.js
export default Ember.LinkComponent.extend({
classNames: ["list-group-item"],
icon: null,
text: null,
})
...
// app/templates/components/icon-link.hbs
<i class="fa {{icon}} fa-fw"></i> {{text}}
...
// wherever
{{icon-link 'my-account' icon="fa-user" text="Personal details"}}
Here's a related blog post which may help you also - http://til.hashrocket.com/posts/faef1058c3-inheriting-from-linkcomponent-in-ember-is-amazing
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