I've been using Font Awesome for a while now. But just recently I figured that my icons that are html based don't load. They show themselves as a square. Can you please help me. I've also written down the code right below:
<!-- source -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Code in the body -->
<li class="icon1"><i class="fa fa-facebook fa-lg icon small-margin"></i></li>
<li class="icon2"><i class="fa fa-twitter fa-lg icon small-margin"></i></li>
<li class="icon3"><i class="fa fa-rss fa-lg icon small-margin"></i></li>
Please note: only the code I've written above does not work but the code below works fine.
.search:before {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
line-height: 40px;
font-family: 'FontAwesome';
content: '\f002';
background: #21a1e1;
text-align: center;
color: #fff;
font-smooth: always;
}
Related
I do not want a space between my left page and the first box (home box) in my navigation bar. I attached a picture below to show what I mean.
here is the picture
And here is my HTML and CSS code. Please help I am new to HTML and CSS.If you notice any unusual codes or syntax and you know a better way to do it. Please let me know. Thank you so much for helping.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>hello from amy</title>
<!-- Title is name of the page -->
<script src="https://kit.fontawesome.com/1c8222ee2c.js"
crossorigin="anonymous"></script>
</head>
<style>
h1{
font-size: 30px;
margin-bottom: -10px;
}
body{
background-color: white;
font-size: medium;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.center{
max-width: 500px;
margin: auto;
padding: 10px;
}
.topnav {
overflow: hidden;
background-color: black;
}
.topnav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color:white;
color: black;
}
.topnav a.active {
background-color:white;
color: black;
}
</style>
<body class="left">
<div class="topnav">
<a class="active" href="#home"> <i class="fa fa-fw fa-home"></i> home</a>
<i class="fa-solid fa-ship"></i> my journey
<i class="fa-solid fa-diagram-project"></i> my projects
<i class="fa fa-fw fa-envelope"></i> Login contact
</div>
<h1>hong thy nguyen <i class="fa-brands fa-space-awesome"></i> </h1>
<p>
"you can never cross the ocean until you have the courage to lose sight of the shore" - Christopher Columbus
</p>
<p>here is some information about me <i class="fa-regular fa-face-grin-beam"></i>
</p>
<p> preferred name: <i>amy</i></p>
<p>age: 21</p>
<p>education: university of central florida</p>
<p>major: computer science</p>
<p>year: first year</p>
<p>hobbies: drinking coffee <i class="fa-solid fa-mug-hot"></i> and writting code <i class="fa-solid fa-laptop"></i> in the morning</p>
<p>here is my youtube channel: Link
</p>
<p>give a look at all projects that I have done: Porject Page</p>
</body>
I have tried various methods in css to align the icons with the text but the icons appear slightly shifted up from the text baseline.
I address the icons with:
/* Style the full height sidebar */
.sidebar {
height: 100%; /* Sidebar will take the full screen height */
width: 180px; /* Sidebar width */
position: absolute; /* Position the sidebar relative to the browser window */
z-index: 1; /* Appears on top of other elements */
top: 0px; /* Top margin of 0px */
left: -140px; /* Left margin sets the sidebar off screen, leaving 20px visible */
padding: 10px 5px 5px 10px; /* Padding 15px */
background-color: #111; /* Background color */
overflow-x: hidden;
}
.sidebar a {
text-decoration: none; /* This stops the underline on link elements */
font-size: 20px; /* Set font size of sidebar links */
color:#818181; /* Set font color of sidebar links */
display: block;
padding: 10px; /* Same as the sidebar */
}
.sidebar a:hover {
text-decoration: none; /* This stops the underline on link elements */
color: #f1f1f1; /* On mouse over change font color of sidebar links */
}
.sidebar:hover {
left: 0; /* On mouse over the sidebar should appear on screen */
}
i {
float: right;
}
<html>
<head>
<title>Master Tracker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load a font library -->
<link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet">
<!-- Load an icon library -->
<script src="https://kit.fontawesome.com/ae6badd0ee.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="sidebar">
<i class="fa fa-fw fa-home"></i> Home
<i class="fas fa-archive"></i></i> Archive
<i class="fas fa-folder-open"></i> New File
<i class="fas fa-chart-pie"></i> Analytics
<i class="fas fa-address-book"></i> Contacts
<i class="fas fa-dumpster-fire"></i> Hero
<i class="fas fa-search"></i> Search
<i class="fas fa-life-ring"></i> Help
</div>
</body>
</html>
It is strange because it looks good in the post editor but not when I run it in browser for VS code. Any help on how to align icons appreciated.
Are you looking for something like this?
I applied text-align: right to each icon. - Some icon shapes/sizes are bigger than others so maybe adjust them individually until you're happy with the result.
/* Style the full height sidebar */
.sidebar {
height: 100%; /* Sidebar will take the full screen height */
width: 180px; /* Sidebar width */
position: absolute; /* Position the sidebar relative to the browser window */
z-index: 1; /* Appears on top of other elements */
top: 0px; /* Top margin of 0px */
left: -140px; /* Left margin sets the sidebar off screen, leaving 20px visible */
padding: 10px 5px 5px 10px; /* Padding 15px */
background-color: #111; /* Background color */
overflow-x: hidden;
}
.sidebar a {
text-decoration: none; /* This stops the underline on link elements */
font-size: 20px; /* Set font size of sidebar links */
color:#818181; /* Set font color of sidebar links */
display: block;
padding: 10px; /* Same as the sidebar */
}
.sidebar a:hover {
text-decoration: none; /* This stops the underline on link elements */
color: #f1f1f1; /* On mouse over change font color of sidebar links */
}
.sidebar:hover {
left: 0; /* On mouse over the sidebar should appear on screen */
}
i {
float: right;
}
<html>
<head>
<title>Master Tracker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load a font library -->
<link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet">
<!-- Load an icon library -->
<script src="https://kit.fontawesome.com/ae6badd0ee.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="sidebar">
<i style="text-align: right;" class="fa fa-fw fa-home"></i> Home
<i style="text-align: right;" class="fas fa-archive"></i></i> Archive
<i style="text-align: right;" class="fas fa-folder-open"></i> New File
<i style="text-align: right;" class="fas fa-chart-pie"></i> Analytics
<i style="text-align: right;" class="fas fa-address-book"></i> Contacts
<i style="text-align: right;" class="fas fa-dumpster-fire"></i> Hero
<i style="text-align: right;" class="fas fa-search"></i> Search
<i style="text-align: right;" class="fas fa-life-ring"></i> Help
</div>
</body>
</html>
This will be help you.
I noticed images are not the same size. I adjusted the size and changed home's class.
/* Style the full height sidebar */
.sidebar {
height: 100%; /* Sidebar will take the full screen height */
width: 180px; /* Sidebar width */
position: absolute; /* Position the sidebar relative to the browser window */
z-index: 1; /* Appears on top of other elements */
top: 0px; /* Top margin of 0px */
left: -140px; /* Left margin sets the sidebar off screen, leaving 20px visible */
padding: 10px 5px 5px 10px; /* Padding 15px */
background-color: #111; /* Background color */
overflow-x: hidden;
}
.sidebar a {
text-decoration: none; /* This stops the underline on link elements */
font-size: 20px; /* Set font size of sidebar links */
color:#818181; /* Set font color of sidebar links */
display: block;
padding: 10px; /* Same as the sidebar */
}
.sidebar a:hover {
text-decoration: none; /* This stops the underline on link elements */
color: #f1f1f1; /* On mouse over change font color of sidebar links */
}
.sidebar:hover {
left: 0; /* On mouse over the sidebar should appear on screen */
}
i {
float: right;
width:20px;
height:20px;
}
<html>
<head>
<title>Master Tracker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load a font library -->
<link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet">
<!-- Load an icon library -->
<script src="https://kit.fontawesome.com/ae6badd0ee.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="sidebar">
<i class="fas fa-home"></i> Home
<i class="fas fa-archive"></i></i> Archive
<i class="fas fa-folder-open"></i> New File
<i class="fas fa-chart-pie"></i> Analytics
<i class="fas fa-address-book"></i> Contacts
<i class="fas fa-dumpster-fire"></i> Hero
<i class="fas fa-search"></i> Search
<i class="fas fa-life-ring"></i> Help
</div>
</body>
</html>
I changed these codes:
<i class="fa fa-fw fa-home"></i> Home <!--deleted fa-fw and fa-->
<i class="fas fa-home"></i> Home <!--inserted fas-->
and I insert this code:
i {
float: right;
width:20px;//inserted
height:20px;//inserted
}
I want to create different pages corresponding to the information on the nav bar that is accessible by clicking on the buttons. How is this achieved? Here is the code for the Nav Bar, additional information will be given on request.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
</style>
<body>
<div class="navbar">
<a class="active" href="#Home"><i class="fa fa-fw fa-home"></i> Home</a>
<i class="fa fa-fw fa-search"></i> search
<i class="fa fa-fw fa-envelope"></i> Contact
<i class="fa fa-fw fa-user"></i> More Info
</div>
</body>
You link to other pages by placing the path to the files of those pages in href. Say if you have a file named search.html in the same folder, you would link to it using this a tag:
search
If the file is outside of the folder, you use ../ to navigate out of the folder. For example, if contact.html is in another folder called pages, you would do ../pages/contact.html.
if you have move one page to another page using html only, you can use href tag. "page.html" is a page which u have to move on button click here is code....
And make sure that page.html file should be present in same folder or if not then change the path in href accordingly
<button >Click me</button>
So I have started a personal resume site and I stumbled across something really cool: font awesome, which provides graphics in the form of text allowing you to add font effects to it through CSS. My issue is everything was gong fine until I tried to change the font size, for whatever reason it just won't change. Do you have any ideas? I am also newer here and I have read through how to make posts but if I am doing it wrong please let me know.
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.toggle_menu{
position: fixed;
padding: 15px 20px 15px 15px;
margin-top: 70px;
color: white;
cursor: pointer;
background-color: #648B79;
z-index: 1000000;
font-size: 8em;
}
<!DOCTYPE html>
<html>
<head>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?
family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/menu.js"></script>
<script src="https://use.fontawesome.com/53686df37f.js"></script>
<title>Joseph Kuzera</title>
</head>
<body>
<i class="fa fa-bars toggle_menu"></i>
</body>
</html>
The icons are made by :before psuedoelements on the .fa, so if you targeted the :before instead of the .fa it would get straight to the icon:
.toggle_menu{
position: fixed;
padding: 15px 20px 15px 15px;
margin-top: 70px;
color: white;
cursor: pointer;
background-color: #648B79;
z-index: 1000000;
}
.toggle_menu:before {
font-size: 8em;
}
That is not the preferred way of sizing font-awesome icons .. I am not sure it can be done with font-size either. Per the font-awesome example page:
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
http://fontawesome.io/examples/
Font-Awesome has pre-fabricated classes that are built in containing the font-size attribute. No need to write custom CSS to overwrite the font size of the icon. Simply use the built in classes.
That is one way to re-size the fonts. However, what if none of those sizes have what you want? then you do need to use font-size.
The reason your font size isn't rendering is because the .fa class has a font-size:inherit; on it. That's why it's being overwritten.http://jsfiddle.net/1Lf0rowp/43/
However, the above code is more efficient because they have built in font-sizes to handle with the classes.
First of all, I am sorry, my English is not good. I use the way of machine translation.
HTML：
<li class="payrecord-col" data-tags="">
...
</li>
CSS:
.payrecord-row .payrecord-col:after {
font-family: 'FontAwesome' !important;
font-style: normal;
content: attr(data-tags);
display: block;
width: 30px;
height: 30px;
border-radius: 30px;
text-align: center;
}
In this case, I found that the rendered page does not display the FontAwesome icon.
Like this question would like to ask your friends if there is a solution?
Thanks a lot.
I don't know If there is other way to use fontawsome, but I use it really differently, in HTML:
include it:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
than in where you want to use
<li><i class="fa fa-camera-retro fa-lg"></i></li>