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.
Related
So, recently I've been learning some coding for my course.
I've experimented with a few ideas, and I'm currently making this top header ("topbar") that acts as a mini-header just above the actual header, which displays some extra info.
Unfortunately, I'm a bit of a coding noob and I can't figure out what's going wrong in this code. If you run it, you'll see the social media icons on the right (I'm using Font Awesome) aren't in the header and it's a pain to try and get them there. They should be in line with the elements on the left (middle of the topbar in terms of height, and 30px inwards from the right).
I've played around with padding, margin, align and a bunch of other things but I just can't figure it out. Any help?
HTML CODE:
<!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">
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Noto+Sans+JP&family=Salsa&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>TestWeb</title>
</head>
<body>
<!-- ======= Top Bar ======= -->
<section id="topbar" class="d-flex align-items-center">
<div class="container d-flex justify-content-center justify-content-md-between">
<div class="contact-info d-flex align-items-center">
<i class="fa fa-envelope d-flex align-items-center">contact#example.com</i>
<i class="fa fa-map-marker d-flex align-items-center">1 Avenue, London, AB12 0AB</i>
<i class="fa fa-phone d-flex align-items-center ms-4"><span>123 456 78900</span></i>
<div class="social-links d-flec align-items-center">
<i class="fa fa-twitter d-flex align-items-center"></i>
<i class="fa fa-instagram d-flex align-items-center"></i>
<i class="fa fa-facebook-square d-flex align-items-center"></i>
</div>
</div>
</div>
</section>
</body>
</html>
CSS CODE:
/* ==============================
========== G L O B A L ==========
============================== */
*{
margin: 0;
padding: 0;
}
/* =============================
========= T O P B A R =========
============================= */
#topbar{
height: 30px;
width: 100%;
background-color: #313030;
color: white;
font-size: 14px;
font-family: 'Noto Sans JP', sans-serif;
transition: all 0.3s;
padding: 0;
padding-top: 5px;
padding-left: 10px;
}
#topbar .contact-info i a, #topbar .contact-info i span{
padding-left: 5px;
color: #A1B82B;
font-family: 'Noto Sans JP', sans-serif;
text-decoration: none;
}
#topbar .contact-info i a{
line-height: 0;
transition: 0.3s;
transition: 0.3s;
padding: 30px;
padding-left: 5px;
color: #A1B82B;
}
#topbar .contact-info i:hover{
text-decoration: underline;
}
#topbar .social-links i{
float: right;
color: white;
transition: 0.3s;
padding-right: 5px;
}
#topbar .social-links i:hover{
color: #909090;
text-decoration: none;
cursor: pointer;
}
The reason your social media icons aren't in line with everything else is because they are actually going below it.
Take a look at this image:
As you can see, the dashed blue line is your .social-links div, and it is going below the other items in your menu.
Why is this happening?
The reason this is happening is because by default a div has a display property of block
display: block means that the element should start on a new line, and take up the entire width of it's parent.
So, long story short, to fix your problem you could add something like:
#topbar .social-links{
float: right;
}
This code will make your .social-links div appear on the same line as the other items in your menu, as well as be forced to the right hand side of the navigation bar (which I'm assuming is where you want it.)
Now the icons are in the menu bar, but they're stuck to the top. To fix that remove this line of code:
#topbar .social-links i{
/* float: right; <-- REMOVE THIS */
color: white;
transition: 0.3s;
padding-right: 5px;
}
Just a side note, it looks like you're using a lot of unneeded classes in your HTML, try to only use a class if you have actual CSS written for it :)
Here's a working example of your site:
https://codepen.io/jacobcambell/pen/zYzzrjW
Hope this helped!
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>
I recently started trying to learn webdesign and I've already jumped into my first project. I've created a template in photoshop but I'm having trouble reproducing it in my visual studio code. Any help would be awesome. I've included my questions in the CSS comments. Also, not very relevant but, these past 3-4 days of this new learning experience have been great and very challenging! Would love some general coding tips if possible. Sorry for being an absolute noob. My first project ideal outcome
body {
margin: 0;
background-color: #282828;
}
/* how can I make the navbar go a few pixels down? like in the photo */
.navbar {
width: 100%;
float: left;
background-color: #cb209d;
}
/* can't make the searchbox go to the left side of the navbar :( */
.searchbox {
float: left;
}
/* how am I supposed to center the social logos without using position: absolute? */
li {
list-style: none;
float: right;
border-right: 1px solid #282828;
display: inline-block;
font-size: 35px;
padding: 0px 25px;
color: #282828;
}
/* Can't seem to fix these vertical dividers... I know, I'm a handful :/ */
li:last-child {
border-right: none;
}
#u2b {
border-right: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script
src="https://kit.fontawesome.com/f77b4d6781.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="style.css" />
<title>first project</title>
</head>
<body>
<!-- top navigation bar -->
<div class="navbar">
<ul>
<li id="u2b"><i class="fab fa-youtube" aria-hidden="true"></i></li>
<li><i class="fab fa-facebook" aria-hidden="true"></i></li>
<li><i class="fab fa-instagram" aria-hidden="true"></i></li>
<li>
<input
class="searchbox"
type="text"
name=""
placeholder="Search me fam"
id=""
/>
</li>
</ul>
</div>
</body>
</html>
How can I make the navbar go a few pixels down? like in the photo?
Margin or Paddings, how to decide? Consider your HTML layout.
Can't make the search box go to the left side of the navbar?
Research about flexbox and study your layout, it's widely supported as well.
The last 3 answers can also be answered by good use of HTML layout and flexbox.
I would suggest you to research more about the display property as well
Once you've read the CSS Tricks Article, play around with Flexbox Froggy
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>
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;
}