I have a html select with 2 items, each one should show a FA icon, but only one of them works.
Both icons only have the "sold" version available FA5 free.
Changing the font family to "Font Awesome 5 Free", did not help and then none of icons displayed.
<html>
<head></head>
<body>
<style>
select {
font-family: 'FontAwesome';
}
</style>
<select style='font-weight: 900;'>
<option> Broke</option>
<option> Working</option>
</select>
<br/><br/> Code valid as this shows <i class='fas'></i><br/><br/> But displayed icons have the solid style as free and the other styles are pro only<br /> https://fontawesome.com/icons/graduation-cap?style=solid f19d<br /> https://fontawesome.com/icons/th-large?style=solid
f009<br />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-1/js/all.js" crossorigin="anonymous"></script>
</body>
</html>
Thanks in advance
You are using the JS+SVG method to load your icons so the one used inside the content <i class='fas'></i> will get transformed into an SVG. The unicde inside the select aren't considered by this and will rely on the font-family: 'FontAwesome' which is the old version and the first icon you are trying to show exist only in the V5 (unlike the second one).
To fix your issue, you need to load the CSS version and correct the font-family
select {
font-family: 'Font Awesome 5 Free';
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0-1/css/all.css">
<select style='font-weight: 900;'>
<option> Broke</option>
<option> Working</option>
</select>
<br/><br/> Code valid as this shows <i class='fas'></i><br/><br/> But displayed icons have the solid style as free and the other styles are pro only<br /> https://fontawesome.com/icons/graduation-cap?style=solid f19d<br /> https://fontawesome.com/icons/th-large?style=solid
f009
<br />
Related
this is very basic code as I'm still a beginner, I'm having trouble getting it to load into Chrome via Brackets on OSX.
When I load the file locally it displays everything but the CSS is not loading, everything else is functioning properly.
My troubleshooting so far:
index.html and my tutoringservices.html are in the same directory as style.css.
I've saved and restarted my computer to make sure it wasn't a refresh issue
Cleared Chrome's cache to make sure the CSS was being loaded properly
I've copypasted CSS code from w3schools.com and other basic websites to make sure the basic code would function properly. I removed everything but the .button styling, as that's what I was originally trying to troubleshoot, not so much the font import.
I don't know how open Firefox thru Brackets so I have not loaded Firebug.
I have not yet linked the CSS to my index.html as in theory it should work on tutoringservices.html anyhow. Here's my code:
tutoringservices.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact</title>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
</head>
<body>
<header>
Home
</header>
<main>
<h1>Get in Touch</h1>
<hr>
<p>
Thank you for your interest. Inquiries usually receive a response within 24 hours.
<br>If you do not receieve a timely response, please feel free to send another!</p>
<form class="contact-form" action="contactform.php" method="post">
<input type="text" name="name" placeholder="Full name">
<br><br>
<input type="text" name="mail" placeholder="Your E-Mail">
<br><br>
<input type="text" name="phone" placeholder="Phone Number (optional)">
<br><br>
<input type="text" name="subject" placeholder="Subject">
<br><br>
<textarea name="message" placeholder="Message"></textarea>
<br><br>
<button type="submit" name="submit">SEND</button>
</form>
</main>
</body>
</html>
style.css
#charset "UTF-8";
.paragraph {
font-size: 50px;
line-height: 62px;
font-family: 'Amatic SC', cursive;
}
font-family: 'Amatic SC', cursive;
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Be happy to answer any additional questions, thanks for your time.
The .name in the css file indicates it is styling a class, but the classes are not used in the HTML file. So .button means it styles the button class instead of the button element.
Two options:
Style the element instead of the class by removing the dot
Add the class to the css file, for example on the button:
<button class="button" type="submit" name="submit">SEND</button>
Use classes in your HTML code. In your CSS you use, for example, .paragraph - so use it in HTML as well: <p class="paragraph">, and the same for button.
Second issue is a little bit more tricky to spot, but easier to fix. You have a wayward CSS declaration outside of any selector in your style.css file, on line 9. Simply remove it:
font-family: 'Amatic SC', cursive;
Do those two fixes and you will be golden.
Ok the problem as I see it (assuming the directory of css file is correct), is that your referring in your css code the classes ".paragraph" and ".button" which do not exist in your html code. When you refer in css to some part of html, you do it as follows:
for id ex:
html
<div id="my_id">
css
#my_id{}
- "." for class
html
`<div class="my_id">`
css
`.my_id{}`
- just the tag name for the tag itself
html
`<div>`
css
`div {}`
you must be careful when referring by tag names.
You man not need the ./ if it is in the same directory in the href="style.css". When it comes to the paragraph and button, your css is referring to them as classes by adding a "." before them. If you just want to call them by html tag
p {
// put style for all paragraph tags here
}
button {
// put styling for all buttons here
}
I've double checked my syntax for linking the CSS file in the of my HTML file, and it all looks correct to me. And when I view the page source of my HTML page, it does indeed to be linking correctly to the CSS page. But none of the styling seems to be showing up. I'm fairly certain that the linking of the CSS file is fine, but I can't understand why none of the changes are appearing.
HTML FILE:
<!DOCTYPE html>
<html>
<head>
<!--title to appear on the tab of the browser-->
<title>Midterm: Hangman</title>
<!--linking a CSS style sheet for the page-->
<link rel="stylesheet" type="type/css" href="hangman.css">
<!--running the hangman game-->
<script src="hangman.js"></script>
</head>
<!--run the main function from the javascript file when page is loaded-->
<body onload="javascript:hideWord()">
<!--adding a title that will appear on the webpage-->
<h1>Hangman</h1>
<!--create a text box, restrict to only one letter being able to be typed, create placeholder text-->
<input id="guessedLetter" type="text" maxlength="1" minlength="1" placeholder="Guess a letter" />
<!--create a button to submit guessed letter and run the compareLetter function when clicked-->
<button type="button" onclick="javascript:compareLetter()">Guess!</button>
<button type="button" onclick="javascript:hideWord()">Restart</button>
<!--underscores to hide the word that the player is guessing-->
<div id="hiddenWord"></div>
<!--a counter to keep track of number of player attempts-->
<p id="counter"></p>
<!--add instructions for the player-->
<h2>Instructions</h2>
<p>Put some instructions here!</p>
</body>
</html>
CSS FILE:
body {
background: #2C2A30;
}
button[type=button] {
background: #D94C47;
font-family: Arial;
padding: 5px 5px;
font-size: 25px;
border-radius: 5px;
padding: 7px 12px;
border: 1px solid #D94C47;
color: white;
font-weight: bold;
}
button[type=button]:hover {
background: #FF7A61;
border: 1px solid #FF7A61;
color: #2C2A30;
}
SCREENSHOT OF CHROME DEVELOPER TOOL:
SCREENSHOT OF FOLDER STRUCTURE:
You should be using <link rel="stylesheet" href="hangman.css">.
You have a typo:
<link rel="stylesheet" type="type/css" href="hangman.css">
should be:
<link rel="stylesheet" type="text/css" href="hangman.css">
Note the type --> text.
Additionally, in HTML5 you don't need the type attribute at all, so you can just have:
<link rel="stylesheet" href="hangman.css">
If the CSS page is linking to the html page, and you're not seeing updates, it's possible that this is a cashing issue. In Google Chrome, right click on the page and click 'Inspect'. THEN, wiith the inspector open, navigate to the top of the page near the address bar and right click on the refresh icon. Then select 'Empty cache and Hard Reload'.
I'm working to reproduce a design I found, the design shows a text arrow like so:
Any idea how to make that arrow? The obvious > looks wrong:
It looks like your designer used chevron-right from Font Awesome. You can install it by adding a stylesheet from the Font Awesome CDN like I've done below or through any of the other setup options. Then, you can reference the icon on the page by copying the icon code that the Font Awesome documentation supplies you with.
Here's a demo where I've tried to recreate your image:
:root {
background-color: #22272A;
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: #BCBDBD;
}
.fa-chevron-right {
margin-left: 6px;
}
HIKING <span class="fas fa-chevron-right"></span>
<!-- External Libraries -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
In production code, you may want to choose a different installation method for performance considerations that takes into account your page's needs - for example, choosing to import SVGs with JavaScript if you don't have a very large number of icons to display.
Try http://fontawesome.io
They have lots of icons - Search for 'fa-angle-right ' on this page: http://fontawesome.io/cheatsheet
Otherwise, you can use a png or an svg.
<!DOCTYPE html>
<html>
<style>
body {
font-size: 20px;
}
</style>
<body>
<p>I will display ❯</p>
<p>I will display ❯</p>
</body>
</html>
I'm trying to incorporate font-awesome icons in my webpage, and it all works fine, until I change to my font of choice, Exo 2, and the icons show up as a bordered square. It works fine with other fonts, but for some reason this won't work.
I have included the font-awesome stylesheet, and the google fonts stylesheet.
If anyone could point me to what I'm doing wrong, would be appreciated!
This issue with font-awesome could be due to setting other font to the icon. Please see this fiddle
.parent1,
.parent1 > i{
font-family: 'Open Sans', sans-serif;
}
.parent2{
font-family: 'Open Sans', sans-serif;
}
<script src="https://use.fontawesome.com/a30dc5ca39.js"></script>
<div class="parent1">
<i class="fa fa-times"></i>This won't work
</div>
<div class="parent2">
<i class="fa fa-times"></i>This works
</div>
If you set the font to the child element i.e. the <i> element, then font-awesome won't be rendered as you expect.
In the second example I only set different font to the parent, but not the icon, and it works as expected
fontawesome is font icons and Exo 2 is font and not "font icons"
to work fontawesome u must apply
font-family: FontAwesome;
and if u change it to something else here i think "Exo 2"
font-family: Exo 2;
it wont work and will disply u square
I have created an HTML template for a mailchimp campaign that includes font awesome icons in the footer. If I send the HTML email using Mandrill, its works fine. When I import the HTML into a Mailchimp template, the icons dont appear.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
.footer i {
color: #999;
margin: 0 2px;
}
.footer i:hover {
color: #333;
}
.footer p {
text-align: center;
margin-bottom: 15px;
}
.footer a i {
border: none;
outline: none;
}
</style>
Here are the icons in use:
<p>
<a href="http://facebook.com/"><i class="fa fa-facebook-square fa-2x"></i>
<a href="http://twitter.com/"><i class="fa fa-twitter fa-2x"></i>
<a href="http://pinterest.com/"><i class="fa fa-pinterest fa-2x"></i>
<a href="http://instagram.com/"><i class="fa fa-instagram fa-2x"></i>
</p>
You need to use inline CSS as it says :
Use inline CSS Because browser-based email applications, such as
Gmail, strip out <head> and <body> tags by default, always use
inline CSS over embedded CSS.
Read the link
Try converting your code here and then mail it
There's no way to do this. Unfortunately e-mail clients are way too limited. Most can't handle any CSS3, nor #font-face (that's what font-awesome uses for the icons). If you want Outlook support - you certainly want - you shouldn't use the icons as background images too.
The only safe way is to convert every icon to images. Fortunately, iconmoon can help. Choose the icons you need, select to download as SVG/PNG and use the PNG files.
Another warning: use tables for layout, like you were in 1998, no floats or fancy stuff like that.
If you are asking: "How can I use a HTML template, which includes Font Awesome icons, in a MailChimp campaign?" then I can't help.
But I can answer "How can I use Font Awesome icons in a MailChimp campaign?"
The only way that I found that works is to build your MailChimp campaign on their website, using their campaign editor/designer. Basically, I had to turn the icon into an image, and in-line and re-size it to fit my needs. Extra manual work, but this is what I needed. Hope this helps.