i want to display font awesome icon in custom joomla module, but when i write tag and saves the code, it doesn't displays any icon. when i write the same code in php file, it works.
following is the code:
<i class="fa fa-clock-o fa-4x " aria-hidden="true"></i>
<h4>
Very fast & easy
</h4>
<p>
lorem ipsum
</p>
i found the answer. In global configurations, set default editor to none.It works :)
no need to change editor, you can use TINYMCE editor default. this link may be help full to you:
https://www.joomla-monster.com/blog/joomla-3-0/how-to-stop-joomla-editor-from-cleaning-some-html-elements
Related
#1
Add an HTML module to a page, then add the following tag via html source:
<em class="icon-featured fas fa-user"></em>
Nothing happens. Go back to source, and see that the editor has automatically commented out the tag.
Removing the FAS and FA-USER classes cause it to show up without issue, so it has to be something with font-awesome.
#2
There are actually two things that happen...
if the html component is already on the page and you add the FA icons, THEN add the 2sxc module, it squishes them.
If the 2sxc module is on the page first, it comments them out.
#3
This...
<p>before -<em class="icon-featured fas fa-user"></em>-after
</p>
becomes..
<p>before <em class="icon-featured fas fa-user"></em> --> -after</p>
Regarding #1: This probably has to do with the configuration of the HTML Editor Provider. The CK Editor has a freature that will clean up HTML.
Here is how to fix it: https://dnncommunity.org/blogs/Post/2841/Help-DNN-CKEditor-is-cleaning-my-HTML
After spending hours going around in circles. I've reached a level of frustration where I need an outside perspective.
See this code here and how it produces exactly what should be expected.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<p class="fa fa-check-circle fa_custom"> Verified</p>
<i class="fa fa-check"></i>
Then if I enter this code within a Shopify liquid file.
The output is this:
Why isn't one of the icons showing?
I've made this demonstration to highlight my problem. I'm experiencing this with a few other font awesome icons as well. I'm designing pages in HTML / CSS in sublime. Then when I take this code into a Shopify store. The icons can't be seen. I've replicated this problem in multiple stores.
It's very strange. Can someone please help me.
You have the first icon inside a p-statement.
Maybe one of your CSS-files is changing the font.
Tried this one?
<i class="fa fa-check-circle fa_custom"></i> Verified <i class="fa fa-check"></i>
I'm using the current version of bootstrap and the current version of font aweson.
Unfortunately, only some icons are displayed, some others not:
working are e.g. fa-envelope, fa-facebook, ...
NOT working is e.g. fa-address-book
Here is the snippet of the html code:
<ul>
<li>
<i class="fa fa-address-card-o" aria-hidden="true"></i>
</li>
</ul>
Why is especially fa-address-book not shown?
How can I fix the problem?
Thank you very much!
font-awesome has a css file that contains fa classes. So only updated font not worked with new icons and you must update css files of font-awesome.
You must be updating your css font to contains new icons like fa-address-book:
https://andreas-peter.de/font-awesome/css/font-awesome.min.css
font-awesome current css file that contains fa-address-book: http://fontawesome.io/assets/font-awesome/css/font-awesome.css
you supposed to use like this
<i class="fa fa-address-book" aria-hidden="true"></i>
more on http://fontawesome.io/icons/
Here are some steps to follow:
Update the font-awesome.css file; the older version's CSS may not contain new fonts.
Also update files inside your font folder. Download font awesome
Ctrl+Shift+R to hard-refresh your page
I've been scouring the web, and I can't find an answer to this. Is there away to add two Font Awesome icons in one i tag?
I can do it if I put two i tags side by side, like this:
Good for: <i class="fa fa-male fa-2x"></i><i class=" fa fa-female fa-2x"></i>
So is there anyway to do this?
Glyph-based fonts like this generally function by changing the content of the element to a specific value, which the font picks up and renders as the appropriate glyph.
So it's unlikely that you'll be able to use a single tag to display both of them unless the library provides specific syntax for handling that behavior on it's own (similar to how Font Awesome uses stacking).
This is not possible in a single <i> tag, reason is the way how the glyph identifying classes are applied. For longer or dynamic sequences you can however directly use the icons codes in markup notation:
html: <span class="font-awesome"></span>
css: .font-awesome { font-family: FontAwesome; }
This obviously requires that you load the font as FontAwesome.
I created a fiddler as simple demonstration: https://jsfiddle.net/6ofmn36g/
I do agree though that this is an approach that is somewhat hard to read, though...
With Font Awesome 5, it's possible!
Masking
Combine two icons create one single-color shape, thanks to the power of SVG in Font Awesome 5! Use it with our new Power Transforms for some really awesome effects.
Go through the Masking section in this link.
The below snippet is a small working example taken from their site
<!-- Important : Use the SVG & JS method and reference the Js file, not the CSS file -->
<script src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>
<div class="fa-4x">
<i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
<i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
<i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:MistyRose"></i>
</div>
Not possible with current library of FontAwesome. But there are work arounds as arkascha has suggested below.
Additional Info:
Not exactly what you are asking for But I think this will help you, Also future crowd who falls into this thread with the title.
I had answered similar stuff... Here
https://stackoverflow.com/a/36491858/2592042
You can also build a custom icon by using set of icons available in the font-awesome icon set by stacking and aligning them accordingly. Stacked Icons
Example:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-lg">
<i class="fa fa-male fa-stack-1x"></i>
<i class="fa fa-female fa-stack"></i>
</span>
My website runs on Concrete5.
I wanted to add some more Font Awesome icon to an existing page, but it's not showing. Strange thing is, there already are icons on my webpage and they are showing...
However when I edit the block with the icons in it to check the HTML, there is no HTML/CSS saying the icons should be there!
When I add an icon in the content block in HTML, nothing shows. But when I add an icon with an HTML block it does show.
For instance the tree columns underneath the green picture show three green check boxes.
And this is what the content block says is in the block:
<p>Sessie 1</p>
<p>Analyse van je proces van vliegangst en je omslagpunt</p>
<p>Stoppen van de angst, piekeren en vervelende herinneringen</p>
<p>Praktische oefeningen voor thuis</p>
See the website here
As you can see, there is no font-awesome css in there. But icons are showing on the webpage. The css is also showing when you check the html of the page.
Now, if I would put
<p> <i class="fa fa-camera-retro"></i> test</p>
In the same block (a content block, in the html window). It won't show a camera. It would just show "test".
If I then go back to the content block and see what's in the html, it says
<p>test</p>
Now if I would put the same line of code in an HTML block, it does show the camera icon.
So there are two things happening:
Older font-awesome icons are showing on the webpage but not in the content blocks html.
New font-awesome icons can't be added through html in content blocks, but can in HTML blocks.
Edit: When I use this code:
<p class="fa fa-camera-retro"></p>
It does show in the content block. But then I can't simply add a symbol with some text, because the font will be from the font-awesome font.
the <i> tag still isn't working.
so
<i class="fa fa-camera-retro"></i>
Gives nothing.
The icons only appear when there's text between the code:
<i class="fa fa-camera-retro">foo</i>
However, the editor changes the <i> tag then to an <em> tag. And 'foo' then has the font-awesome font. Not the font of my website.
****SOLUTION****
If I do it like this:
<p><i class="fa fa-camera-retro"> </i> some text</p>
Everything works as I want.
Still, all the older font-awesome css from the website is missing from the content blocks, but it is rendering when I view the website in a browser. If anyone has a suggestion how that can be fixed?
Ahh, I think I see your problem. You entered a new HTMLblock, and just pasted in the fa-camera-retro. FontAwesome works as a class and should be entered within a tag.
You can use the <i> tag for it, but also the <p> tag or whatever you want. It should be then something like
<i class="fa fa-camera-retro"></i> (dont forget the extra fa class to make it appear as a font awesome.
It's also worth remembering for the future that when you use the content block, TINYMCE automatically strips out some HTML tags by default, this includes <i>'s... To prevent TINYMCE from doing this, go to:
Dashboard > System & Settings > BASICS / Rich Text Editor. Once there, select 'Custom' and add the following line
verify_html: false
For more information, it's worth keeping this in your bookmarks when using Concret5, especially the content block: http://www.tinymce.com/wiki.php/Configuration3x:verify_html
I saw this on your page:
It should be <p><i class="fa fa-camera-retro"></i> some text</p>
Result:
So basically what you need to so is just change this
<p>fa-camera-retro</p>
to this
<p><i class="fa fa-camera-retro"></i> some text</p>
The trick to adding FontAwesome icons in C5 Content blocks is using the em tag along with adding code for non-breaking space between them.
<em class="fa fa-camera-retro"> </em>
Check if you have given your icon any sort of margin, I had the same problem where some icons would make when I checked keenly I noticed I had a CSS rule.
p i{
margin-left:10px;
}
when I removed that margin all my icons worked.