I'm using FA and :before to use icons instead of bullets.
Some unicode characters work, and some don't. For example, f004 (heart), f005 (star), and f2dc (snowflake) work. But f001 (music), f008 (film), and f046 (check) don't work.
I'm using FA 5.0.6 Free.
#font-face {
font-family: 'awe506';
src: url("../fontawesome506/fa-regular-400.eot");
src: url("../fontawesome506/fa-regular-400.eot?#iefix") format("embedded-opentype"),
url("../fontawesome506/fa-regular-400.woff2") format("woff2"),
url("../fontawesome506/fa-regular-400.woff") format("woff"),
url("../fontawesome506/fa-regular-400.ttf") format("truetype"),
url("../fontawesome506/fa-regular-400.svg#fontawesome") format("svg");
}
.bulletsamples ul {
list-style-type: none;
padding-left: 0;
margin-left: 2em;
}
.bulletsamples li {
position: relative;
padding-left: 2em;
margin-bottom: 10px;
}
.bulletsamples li:before {
position: absolute;
top: 0;
left: 0;
font-family: awe506;
font-weight: 400;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.stars li:before {
content: "\f005"; /*THIS WORKS*/
color: blue;
}
.stars li:before {
content: "\f008"; /*THIS DOESN'T WORK*/
color: blue;
}
No - I don't have two .stars li:before rules in my CSS - I've added this for illustration.
On the FA website (https://fontawesome.com/icons?d=listing&m=free) I filtered the list to only show icons included in the free set.
Also - the icons are hollow - I followed the instructions on FA's site and set font-weight to 900 for solid icons and it made no difference.
Thanks in advance - Cath
Doesn't look like u+f008 has a glyph in that font/version; it is simply not present.
According to https://fontawesome.com/icons?d=gallery&q=film you would need to use the solid version instead of the regular one (which is "Pro" only). This goes for u+f001 as well. u+f046 has apparently been moved at some point to u+f14a.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#font-face {
font-family: awe506;
src: url(fa-solid-900.woff);
}
.stars {
font-family: awe506;
}
.stars li:before {
/*content: '';*/
content: '\f005';
color: blue;
}
.stars li:after {
/*content: '';*/
content: '\f008';
color: blue;
}
</style>
</head>
<body>
<ul class="stars">
<li>foo</li>
<li>bar</li>
</ul>
</body>
</html>
Related
do you know how to change background color. i tried using
body.darkmode{
background-color:black;
color: white;
still not working. my code is also very messy because i just started coding in html yesterday. so this is my first time. i'm tring to make a darkmode version. so please dont worry about the content because it just for demonstration. i also make the simmilar post yesterday, but in this case i put some scroll bar and navbar.
<!DOCTYPE html>
<html>
<head>
<title>UwU</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div style="padding:15px 15px 2500px;font-size:15px">
<script>
// When the user scrolls down 20px from the top of the document, slide down the navbar
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
}
</script>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
Settings
</div>
<style>
h1 {text-align: center;}
p {text-align: left;}
div {text-align: left;}
.left {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>UwU</h1>
<p>you just got uwu.</p>
<p>say uwu after you saw master uwu for ton of luck UwU</p>
<div>UwU.</div>
<p></p>
<img src="data:image/jpeg;base64,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" alt="avatar" style="width:300px">
</body>
</html>
<style type ="text/css" >
.footer{
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}
</style>
</head>
<body>
<div class="footer">Made by rama 4/6/2020
<br>use light mode<a>•••</a>Page 2 UwU
</div>
</body>
You have not added class = "darkmode" to the body tag.
Add this and it should work.
<body class = "darkmode">
HTML CODE:
(Image is present in the right directory)
<html lang="en-US">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<h1>Sample Header</h1>
</header>
<main>
<article>
<h2>Sample Header 2</h2>
<p>Sample Paragraph 1</p>
<p>Sample Paragraph 2</p>
</article>
</main>
</body>
CSS CODE:
html{
font-family: 'Open Sans', sans-serif;
background-image: url('images/pattern.png');
background-color: burlywood;
}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: white;
position: relative;
}
header {
height: 150px;
}
h1 {
font-size: 50px;
line-height: 140px;
margin: 0 0 0 32.5px;
}
main {
background: #ccc;
}
article {
padding: 20px;
}
h2 {
margin-top: 0;
}
p {
line-height: 2;
}
background-image does not work in the above form,but when the same css-code is included in style tag,background-image works perfectly fine,why not in external stylesheet?
I think this is a path issue for the background-image: url(...). I can't reproduce at the moment because of lacking information but please be aware of your folder structure. When you use <style> for CSS the starting point for the relative path is your root folder (or where the HTML is located).
In case of the style.css the starting point is the folder styles. So mind that in that case the path might have to change. You can use the Firefox developer tools or Chrome developer tools to modify your path on the fly. This way you can easily find out yourself where the issue with the path originates or if the background-image rule was applied properly on your element.
Updated: added links to developer tools (Mozilla, Google)
I'm needing to add a collapsible sidebar to a mapbox map.
I'm using this example:
https://www.w3schools.com/howto/howto_js_collapse_sidebar.asp
Here is my html file. It shows it load briefly, but then the map renders on top of it.
Ultimately I want to develop a sidebar like what pops up when you click on a feature in Google Maps. I've not quite found something like this, so if anyone knows of a solution, let me know.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Castello Plan: Sidebar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<!-- For Interactive sidebar Head-->
<style>
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
<!--End Interactive Sidebar Head-->
</head>
<body>
<div id='map'></div>
<!--For Interactive Sidebar Body-->
<div id="mySidebar" class="sidebar">
×
About
Services
Clients
Contact
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Toggle Sidebar</button>
<h2>Collapsed Sidebar</h2>
<p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
<!--End Interactive Sidebar Body-->
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoibml0dHlqZWUiLCJhIjoid1RmLXpycyJ9.NFk875-Fe6hoRCkGciG8yQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/nittyjee/cjowjzrig5pje2rmmnjb5b0y2',
center: [0, 0],
zoom: 0
});
</script>
</body>
</html>
Firstly, add your map to the main div, and set the map css to "position:relative;"
Your open button needed to also be "position:absolute;" and iven a z-depth of 1 tobe above the map.
I added 100% height to the html, body & map css to ensure the content stretches to full height.
Hope this helps.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Castello Plan: Sidebar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width:100%;
height:100%;
}
html, body, #map{
height:100%;
margin: 0px;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
position:absolute;
top:10px;
left:10px;
z-index:1;
border-radius: 3px;
}
.openbtn:hover {
background-color: #444;
}
#main {
position:relative;
transition: margin-left .5s;
padding: 16px;
height:100%;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
</head>
<body>
<!--For Interactive Sidebar Body-->
<div id="mySidebar" class="sidebar">
×
About
Services
Clients
Contact
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Toggle Sidebar</button>
<div id='map'></div>
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
<!--End Interactive Sidebar Body-->
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoibml0dHlqZWUiLCJhIjoid1RmLXpycyJ9.NFk875-Fe6hoRCkGciG8yQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/nittyjee/cjowjzrig5pje2rmmnjb5b0y2',
center: [0, 0],
zoom: 0
});
</script>
</body>
</html>
I read many similar topics and I tried the suggestions but it seems I can't get this to work.
I am a self-learner, not a professional just building a website for my parents company and I am having a problem with my menu.
This is working fine in IE and Firefox (at least the versions I have) but Chrome and Safari don't like it. Initially in Chrome it looks good but if you zoom out it's breaking and in Safari for iPhone and iPad it's even worse as the last item on my list is never inline with the rest.
What I read is that I need to to have white-space:nowrap; in my code and I do but it's not helping, I was playing with the position attribute as well but none of the values work. Maybe one strange thing about my menu is that each li has an id tag but that's because I want a different image to hover over each item and that's the way I could thing of doing it. I would really appreciate some help, Thanks
Link to the website and code below:http://redcoral-catering.com/index_catering_redcoral.php
Safari iPhone:
HTML:
<div id="navbar">
<ul>
<li id="zero"> за нас</li>
<li id="one"> услуги</li>
<li id="two">нашата кухня</li>
<li id="three" >галерия</li>
<li id="four">филми</li>
<li id="five">кой се е хранил при нас? </li>
<li id="six">контакти </li>
CSS:
#navbar {
width: 894px;
height: 57px;
margin: 0px auto;
padding-left:25px;
padding-top:1px;
/*clear:both;*/
white-space:nowrap;
}
#navbar ul {
font-family: Arial, Verdana;
font-size: 14px;
list-style: none;
margin: 0;
padding: 0;
width:100%;
}
#navbar ul li {
/* display: block; */
display: inline-block;
position: relative;
float: left;
/* border-right: 1px solid #1A1A18;*/
}
#navbar ul li ul { display: none; }
#zero{
background-image: url(images/menu/short.png);
}
#one{
background-image: url(images/menu/short.png);
}
#two{
background-image: url(images/menu/short.png);
}
#three{
background-image: url(images/menu/short.png);
}
#four{
background-image: url(images/menu/short.png);
}
#five{
background-image: url(images/menu/short.png);
}
#six{
background-image: url(images/menu/short.png);
}
#seven{
background-image: url(images/menu/short.png);
}
#navbar ul li a {
display: block;
height: 42px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Calibri, sans-serif;
font-size: 13px;
font-weight: bold;
color: #851212;
border: none;
padding: 10px 28px 5px 28px;
}
#zero a:hover { background-image: url(images/menu/22.png); }
#one a:hover { background-image: url(images/menu/22.png);}
#two a:hover { background-image: url(images/menu/24.png);}
#three a:hover { background-image: url(images/menu/22.png);}
#four a:hover { background-image: url(images/menu/22.png);}
#five a:hover { background-image: url(images/menu/23.png);}
#six a:hover { background-image: url(images/menu/26.png);}
#navbar ul li a:hover {
color: #DF0101;}
Try applying the following settings:
html, body {
margin:0;
padding:0;
}
#navbar {
width: 857px; /* updated width to center properly */
height: 57px;
margin: 0px auto;
/*padding-left:25px;*/
padding-top:1px;
white-space:nowrap;
}
#navbar ul li a {
display: block;
height: 42px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Calibri, sans-serif;
font-size: 13px;
font-weight: bold;
color: #851212;
border: none;
padding: 10px 26px 5px 26px; /* decreased padding very slightly */
}
Also try placing this meta tag in your header:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Let me know if that solves the issue.
I am using a very cool jquery drop down menu by Zach at One Mighty Roar. I cannot get this to link to let's say, a Facebook page in a new window. The js file is below:
$(document).ready(function(){
//Remove outline from links
$("a").click(function(){
$(this).blur();
});
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
The html is below:
<div id="nav">
<ul class="tabNav">
<li><img src="../images/facebook.png" alt="Check out our Facebook page!" width="36" height="36" border="0" /></li>
<li>FTP Site</li>
<li>Contact</li>
<li>Services</li>
<li class="current">Projects</li>
</ul>
<div class="tabContainer">
<div class="tab"><p>Click here to be taken to our Facebook page.</p></div>
<div class="tab"><p>Click here to be taken to our ftp site to download your documents.</p></div>
<div class="tab">Contact Info</div>
<div class="tab">Services Info</div>
<div class="tab current">Projects Info</div>
</div>
The css:
/* MENU */
ul.tabNav {
list-style: none;
width: 100%;
float: left;
}
ul.tabNav li {
float: right;
margin: 0;
}
.tab.current ul li {
list-style-type: none;
margin-left: 15px;
line-height: 1.5em;
}
.tabNav li a img {
margin-top: 15px;
}
ul.tabNav li.current {
}
ul.tabNav a {
color: #FFF;
display: block;
height: 66px;
padding: 10px;
text-decoration: none;
width: 66px;
margin-left: 4px;
font-size: 16px;
border: 1px solid #FF9933;
text-align: center;
font-weight: normal;
text-transform: lowercase;
font-family: "Century Gothic";
letter-spacing: 1px;
line-height: 60px;
}
ul.tabNav li.current a {
padding: 10px;
}
div.tabContainer {
clear: both;
float: right;
width: 500px;
z-index: 9999;
}
div.tabContainer div.tab {
border: 1px solid #FF9933;
color: #FFF;
display: none;
padding: 10px;
background-image: url(images/slideshow_bg.png);
background-repeat: repeat;
margin-top: 14px;
height: 500px;
}
div.tab p:last-child { margin-bottom: 0; }
.tabContainer .tab { display: none; }
I have tried adding my http:// up in the tabNav AND/OR the tabContainer sections and I cannot link out. Frustrating.
Have you tried:
Click here to be taken to our Facebook page.
You can also set other attributes. Check out the documentation and examples here: http://www.w3schools.com/jsref/met_win_open.asp