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;
}
Related
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; }
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>
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
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
In ckeditor editor and (ADDED) using Drupal 7
I click Html Source and paste:
<span><i class="fa fa-facebook"></i></span>
then ckeditor remove the a and the i elements to become:
<span></span>
The problem is that I can't put a i element inside an a element:
<i class="fa fa-facebook"></i>
How can I solve this?
I had a similar problem with the span element which I solved adding in the Custom JavaScript configuration:
config.allowedContent = true;
allowedContent means ONLY allow these entities. extraAllowedContent means allow these entities in addition to default ones. So you can use one of these:
CKEDITOR.replace('textarea_id', {
allowedContent: 'span i a'
});
Or
CKEDITOR.replace('textarea_id', {
extraAllowedContent: 'i a'
});