How do I get this icon to render? - html

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.

Related

local css stylesheet not linking

I'm trying to add my .css file, but it is not working and not applying.
But when I put the same style code in HTML it works, so the problem is links, but I think I am doing it right.
enter image description here
I have also tried putting <link rel="stylesheet" href="style.css"> but I know I gotta put the folder names too, so both don't work.
Also, something was wrong with linking, because I tried putting in <img> and it still wouldn't link or show but when I tried online image, it would link.
change the 9th line as
<link rel="stylesheet" href="../static/style.css">
because u need to go back from dashboard.html use"../"
Then goes to the stylesheet file as "static/style.css"
Path should be ../static/style.css in href attribute

Google Translate messes up Font Awesome Icons

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");
});

Add a picture to your title in HTML

I don't know how to add an image icon to the title,
I have a favion Icon but it doesn't come, when I try to add a picture using the img src tag it comes as it is, no image!
<link rel="icon" type="image/ico" href="favicon.ico" />
Post this inside your <head> tags.
Go to: http://tools.dynamicdrive.com/favicon/
Generate your favicon
then put your favicon.ico icon into your public_html/www/httpdocs folder, in other words, put the icon into the folder where your homepage is located.
Additionally you may type the following code into the homepage's <head></head> section:
<link rel="short icon" href="favicon.ico" />
Wait...are you literally trying to stick an <img> element in the <title>? That ain't gonna fly -- the title can't contain HTML. It contains what's called replaceable character data. Only entity references and the element's closing tag mean anything to the parser; everything else is taken literally, and shows up basically as if you'd already HTML-escaped it. If your HTML said <title><img> stuff</title>, for example, the document's title would be the literal text '<img> stuff', and a search engine would be entirely correct to show that literal text (replacing < with < on its end so it shows up correctly). In fact, it'd be largely incorrect not to, in my opinion; what if your page was about how to use the <img> tag?
The only standard way you're going to get an image anywhere near the title is by properly adding a favicon. It still won't be in the title, but that doesn't make much sense anyway. It'll show up next to the URL in most browsers, which is what you and your users typically want. And OSes that let you create web shortcuts will often use it as the shortcut's icon.
The most cross-browser way to add a favicon is two steps:
Put an icon file at the site's root, named favicon.ico and using the same format Windows uses for icon files. (Some browsers can use PNG/GIF/JPG icons, but it seems IE in particular only likes honest-to-goodness .ICO files.) There are sites, like http://tools.dynamicdrive.com/favicon/ as mentioned in another answer, that will convert an image into an icon for you.
Make sure the page has the following HTML in its head:
<link href="/favicon.ico" rel="shortcut icon">
(Add a slash to self-close the tag if the document is XHTML.)
USE THIS:
<head>
<link rel="icon" type="image/png" href="logo.ico"/>
</head>

Importing .css into html document

I'm learning CSS/HTML and am trying to import a simple css class into the html document, but something appears to have gone awry. Here is Logo.css:
.logo{
color:rgb(255,232,57);
background-color:rgb(0,0,75);
font:ChopinScript;
font-size:96pt;
}
and my html document:
<head>
<link rel="stylesheet" href="Logo.css" type="text/css">
</head>
<div class="logo">
<p class="logo">This text should look like my logo!</p>
</div>
<img src="404-tumblebeast.jpeg" align=center valign=center />
The image shows up fine in Safari, but the text is just generic text. Does the link tag not import as I thought? How would I do the equivalent of #import or #include, if isn't taking care of that?
end the link tag (see below: the /> instead of >).
<link rel="stylesheet" href="Logo.css" type="text/css"/>
Verify that the Logo.css is in the same directory as the html file or use the correct path to the Logo.css file. Just in case you are doing this, you can't put the css under the WEB-INF directory.
You only need the class on the div element or on the p element, not both.
Edit:
I was poking around and found some info about embedding fonts in a page: http://jonrohan.me/guide/css/font-face/

jqTouch css and a href link

I am trying to call a link from a page which points to another part of the page.
This is the code I am using to do this:
<img src="Dress1.jpg" alt="Pic1"></img>
The problem is that when I remove the css stylesheet links from the page, in other words:
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css">
It actually works but with the above links, it doesn't work.
Instead all it does is change the address (by adding #product) and doesn't display the image requested in
I'm not sure what could be wrong.
Thanks.
C.
Depending on which revision of jQTouch that you are using, you will need to add an animation class to your link like slide/flip/disolve in order to actually cause a transition from one psuedo page to the next.
<img src="Dress1.jpg" alt="Pic1"/>
not sure what you are trying to do. in your example, the image is in the link, not the target div. from your description it sounds like you might want something like
See my image
<div id="product"><img src="Dress1.jpg" alt="Pic1"/></div>