Google Translate messes up Font Awesome Icons - font-awesome

I use font awesome icons on my website. (http://fortawesome.github.io/Font-Awesome/)
I am also thinking of adding the google translate widget to my website as a little tab at the bottom that prompts the user to translate the page if they need to. (https://translate.google.com/manager/website/)
However, if I run my site through google translate, all of the font awesome icons gets messed up. I'm thinking that google tries to translate the icons (since it's essentially just a font type). Does anyone have an idea to prevent this from happening?
You can see an example by just running the font awesome site through google translate. (https://translate.google.com/translate?hl=en&sl=en&tl=es&u=http%3A%2F%2Ffortawesome.github.io%2FFont-Awesome%2F)
Google Translate + Font Awesome = Not Awesome

Apparently (untested) you can add class="notranslate" to your stylesheet:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" class="notranslate" />

Just add an attribute to your HTML like this:
<div translate="no">Let's keep this in plain English!</div>
or add a CSS class:
<div class="notranslate">Let's keep this in plain English, too!</div>
Both is possible, but the first one is W3C recommended and can by viewed in detail here: http://www.w3.org/International/questions/qa-translate-flag.en
UPDATE:
The above examples only work for text inside of HTML attributes. It does not include CSS content in the pseudo ::before attribute.
So, just include the fontawesome library through CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

You can add "notranslate" class where You have the problem, for example in my case the problem was in all material-icons, then I added "notranslate" class to all material icons using Jquery
$( document ).ready(function() {
$(".material-icons").addClass("notranslate");
});

Related

Is there a way to link a stylesheet in CSS instead of each HTML page?

I am trying to use font awesome icons on my pages. Is there a way to link the FA stylesheet in CSS so that I do not have to add it to the head of every single one of my html pages? (I have around 45 at the moment.)
This is the code I am referencing:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
I have researched on the internet possible solutions and I think using the #import url action should do the trick but I don't know how to go about doing so that the 'integrity' and 'crossorigin' stay in the code.
Can you use PHP? Move your header code to header.php and just include the header for each page;
<?php include("header.php"); ?>

How do I get this icon to render?

I have a mockup that looks like this:
It has an icon (the i with the circle around it). How do I get something like that to render?
You don't need to use an icon/image, you could simply use the appropriate HTML character:
ⓘ
Result: ⓘ
You can use the Google Material Icons font for this.
This snippet will show an example:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<i class="material-icons">info_outline</i>
You will have to insert the <link> tag before the </head> in your html, and the <i> tag at the right place in the HTML code.

Using Font Awesome in XSLTForms

I tryed to use Font Awesome in XSLTForms but no sucess. I included a link in the header, but every time I try to use an icon, it is not shown. Other CSS styles contained in different files work, but even if I include a tags at the beggining and at the end of the file (for pre-processor) it doesnt work.
<link type="text/css" rel="stylesheet" href="/font-awesome-4.3.0/css/font-awesome.min.css"/>
Any idea?
Write this in xforms header and remove the <css></css> tags at the beggining and at the end of the file (for pre-processor)
<?css-conversion no?>

html5up templates adding extra font awesome icons

I am trying to make a website based on the free HTML5up template
http://html5up.net/prologue
Anyone know how to get the Deviantart social icon? I tried adding the html code
fa fa-deviantart solo
but when I view it, the link is fine but the icon is in the shape of a can instead of the normal Deviantart icon. Please help? What am I doing wrong?
I am not sure if you have added the Font Awesome css inside your head tag or not.
With out that you can't get the icon you are looking for.
click here to download font awesome file. Or add this inside the head tag.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
below is the sample to add icons from font awesome collections.
<i class="fa fa-deviantart"></i> fa-deviantart
Please check this Font Awesome for more info.
The fa-deviantart is new in FontAwesome 4.1, and does not seem to be available in the template you're using. Try adding this line to your <head> tag:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
That should make the latest FA library available, and fa-deviantart worked when I tested it.

Semantic UI Icons-font not loading

I am building a website using the Semantic UI CSS framework, and now I want to use some of its icons.
Here is the HTML:
<h1>Title<i class="lab icon"></i></h1>
I have linked the semantic.css, but I assume I need to do something else too to get the icons working? I tried linking this too:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
But it still doesn't work. What am I missing?
Digging in the semantic CSS file reveals that the fonts need to be located here (relative to your semantic.css): themes/default/assets/fonts/
Source:
https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/css/semantic.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/icon.min.css'>
</head>
<body>
<h1>Icon Example</h1>
<a class="item"><i class="alarm icon"></i>Notifications</a>
<a class="item"><i class="mail outline icon"></i>Messages</a>
</body>
</html>
you can try taking a look at the above snippet. You may also use the below link for other similar issues:
https://cdnjs.com/libraries/semantic-ui
You don't need to use font-awesome of any other library
try cdn first Official icon.min.css
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>
somethimes this doesn't work so what you can do is
go semantic-ui official page
download semantic ui zip folder and extract
in component folder you can find icon.min.css
include that file in index.html
<link rel="stylesheet" href="icon.min.css">
try to display those icon Official docs
<i class="disabled users icon"></i>
ENJOY
My solution was pretty simple (once I worked it out). I had edited themes.config to use my new (yet to be built) theme. As you know it falls back to defaultso everything seemed to work OK.
/* Elements */
:
#flag : 'supernewtheme';
#header : 'supernewtheme';
#icon : 'supernewtheme';
#image : 'supernewtheme';
#input : 'supernewtheme';
:
Even though the console showed the Icons font loading (no 404), iti didn't work. I also checked the font was in my build folder in the correct place, it was.
Changing the theme back to default for #icon did the trick:
#icon : 'default';
if someone is using electron or any other JavaScript framework.
This might work for you.
Icon's in electron after setting up semantic properly were not showing. The error is not in semantic neither loading. Error is with Photon and semantic combination. I used photon with semantic to make my UI look great.
Basic solution I opted is in reference to this official error reporting.
Also in my UI icon wasn't appearing for a drop-down so I used console to solve like
.myclass .icon:before, .myclass.icon-before {
font-family: 'dropdown';
}
Hope it helps.