Font Awesome showing and not showing (concrete5) - html

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.

Related

can't seem to be able to use the icons that I specifically need

So I'm working on a webpage and for it I need to use some icons. There is a font file which contains said icons and I can use and display like 95% of them. Except for the ones I actually need to use. Because i can use most of the other icons, the font file is working fine. Can anyone here help me figure out what is going or with the other icons? I'm also not really sure how can show you what I mean, I can share my HTML code at least, so you get an idea of how I display those icons.
I use the FontDrop website to see what the names of the icons are and those names work for all icons, except the ones i have to use.
HTML:
<h1 class="icontextwhite"> <br><br><br><br>
<i class="icon-email iconstylewhite"></i>
<br>
2012
</h1>
The code above displays the 'email' icon, thats the name of the icon according to the read out from the website i mentioned above.
Below here is an example of the icon of a house, like a homescreen icon. Its called 'home', but when I want to display it, nothing shows.
<h1 class="icontextwhite"> <br><br><br><br>
<i class="icon-home iconstylewhite"></i>
<br>
2012
</h1>

Adding a twitter icon in html page

How to generate the twitter , facebook and youtube icon as in the top of the website
https://store.linefriends.com/
If I inspect the element I see the following html :
<li></li>
Not sure how that icon gets generated from this html line as there is no image etc here
Such icons can be generated using an icon library. The most popular choice is FontAwesome. If you want to add links, you can enclose i tag with an anchor tag, with href attribute. You need to add a bit of styling to it.
a{
color: black;
text-decoration: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container">
<span><i class="fab fa-twitter"></i></span>
<span><i class="fab fa-facebook-f"></i></span>
<span><i class="fab fa-youtube"></i></span>
<span><i class="fab fa-instagram"></i></span>
</div>
You can get the code for link tag from cdnjs
You can search for all icons on their website
You can also download icons and use img tag, but using an icon library, makes things a lot easier.
You use a font family ("Turbo" as I can see) that contains web icons inside.
The icon is generated from the class icon-twitter. Inside this <a> element there is a .icon-twitter::before pseudo element that contains the content value content: "\ea96";. This value is being interpreted to this icon.
So, if you want to change this icon you have to remove the icon-twitter class and put an <img> element with your custom image file ( I would recommend to be an svg file for better load time performance ).
you will need to check each css file found in inspect element via view source for class icon-twitter. (with code like )
Or
Use font awesome for this. More details are available on https://fontawesome.com/
Fon awesome alternatives are available on https://www.google.com/amp/s/www.hongkiat.com/blog/free-font-icons-to-bookmark/amp/ OR https://alternative.me/font-awesome
Or
You can use images to achievs this with tag

Effect of aria-hidden in Font Awesome

what's the effect of aria-hidden in Font Awesome?
Is it necessary to use it? why? or why not?
for example, I want to know the effect of aria-hidden="true" in the code below:
<i class="fa fa-star" aria-hidden="true"></i>
In short, it makes the icon not visible to screen readers, to enhance accessibility.
From the documentation:
If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup.
If you're using an icon to add some extra decoration or branding, it
does not need to be announced to users as they are navigating your
site or app aurally. Additionally, if you're using an icon to visually
re-emphasize or add styling to content already present in your HTML,
it does not need to be repeated to an assistive technology-using user.
You can make sure this is not read by adding the aria-hidden="true" to
your Font Awesome markup.
<i class="fa fa-fighter-jet" aria-hidden="true"></i>
an icon being used as pure decoration
<h1 class="logo">
<i class="fa fa-pied-piper" aria-hidden="true"></i>
Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
</h1>
an icon being used as a logo
Source: http://fontawesome.io/accessibility/

Have Two Font Awesome Icons in One i Tag

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">&#xf183&#xf182</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>

css formatting does not return to previous formatting after an <a href...>text</a> tag pair

I have a page which is not formatting properly, or at least not formatting as I expect it to.
Below is a simplified version of the code.
<div ...>
<div class="db_notes">
<pre>
Some Text.
<span class="blue">Lots more text that may be one line or multiple lines and is
retrieved from a database in preformatted form and often has one or more
links within the preformatted text.</span>
Some Additional text.
<span class="blue">More text that may be one or more lines and is reformatted
and comes from a database and often contains one or more links
within the text.</span>
And more text.
</pre>
</div>
</div>
Only the font color is changed by the <span class="blue">.
The color of the text between the <span class="blue"> and the <a href...> is blue (as desired), but the color of the text between the </a> and the </span> is black (instead of blue).
Any idea as to why, after the </a> tag, the text color does not return to blue?
Thanks!
John
* UPDATE *
First, thanks to all who created examples to test the premise that the color SHOULD be blue after the </a> tag! You proved I'm not crazy! (or not completely crazy).
I made a copy of the example at JS Bin and on the copy page pasted in a major section of the page with the text color problem. To my amazement, the text after the </a> tag is blue, as it should be.
Next I looked through the CSS to find any style elements that might affect the div, span, a, or pre tags, and put them in the CSS section on JS Bin. The resulting formatting still looks correct, with the text after the </a> tag still blue.
So then I copied the entire CSS file and pasted it into the CSS section on JS Bin. That broke it. The text after the </a> tag changed to black, which was the problem I've been having with the page.
So, somewhere in this massive CSS file there is something which is affecting how this page renders. Why, I don't know. I've always been under the impression that after an in-line closing tag the formatting should return to that in effect before the opening tag, but somehow something is changing that behavior.
It is now about 2:15 AM here, so I'm going to call it a day, get some sleep, and take a fresh look at it after some rest.
John
* UPDATE *
I've gone through the entire page making sure that all tags are matched, the nesting correct (no DIV elements inside a SPAN, etc.), and it still does not format properly.
I can't spend any more time on it, so I've come up with a kludge - close the span immediately before the <a href...> and open a new <span class="blue"> immediately after the </a>, as shown below. I know it shouldn't be necessary, but if that is what it takes to make it work, so be it. So, here is the revised simplified code.
<div ...>
<div class="db_notes">
<pre>
Some Text.
<span class="blue">Lots more text that may be one line or multiple lines and is
retrieved from a database in preformatted form and often has one or more
</span>links<span class="blue"> within the preformatted text.</span>
Some Additional text.
<span class="blue">More text that may be one or more lines and is reformatted
and comes from a database and often contains one or more
</span>links<span class="blue">
within the text.</span>
And more text.
</pre>
</div>
</div>
I still would like to know why the browsers are behaving in this manner. If anyone has any thoughts as to what is happening to cause the formatting to break down after the </a> tag, I'd love to hear them.
Thanks,
John
I couldn't get into a source code file for another project (locked for editing), so while waiting I took another look at the problem page.
In looking through the page in Firebug I noticed that while the page source has exactly one <a name="top"> tag, the Firebug display shows multiple instances of that tag. Strange.
Then I looked closer and noticed that there was no </a> tag matching the <a name="top"> tag.
After replacing:
<a name="top">
with:
<a name="top"></a>
The page works correctly!!!
At some point the web site needs to be updated to replace the:
<a name="top"></a>
...and other "a name=" tags with:
<a id="top"></a>
...tags to comply with HTML 5, but with over 2,300 dynamic pages, most with from one to thirty <a name="text"> tags, it will be a long time before there will be funding for such an effort. Another reason why some tags and options need to be supported for backward compatibility.
Thanks again to all who have contributed assistance in any form!
Best wishes,
John
The color of the text between the <span class="blue"> and the <a href...> is blue (as desired), but the color of the text between them </a> and the </span> is black (instead of blue).
If I assume you are using .blue {color: blue;} this property for span then it will change the text color blue for text which is inside the span tag. The text out of <span> will be black.
Have a look at this DEMO.
in this case, I've changed the <span> color from blue to red and you see <a> tag text is still blue which is by default.
Note: only the text inside span will be in blue color that not include the text inside the<a> tag. by default giving a link to <a> tag its change to blue color.