I want to use a font-awesome icon as a bullet point but the h5-tag starts under the fa-icon instead of being on the same line.
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<i class="fas fa-check-circle" style="font-size:30px"></i>
<h5>100% Guaranteed Chargeback</h5>
You can align variable-height elements using display: flex and align-items: center:
.container {
display: flex;
align-items: center;
}
.container i {
margin-right: 8px;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<div class="container">
<i class="fas fa-check-circle" style="font-size:30px"></i>
<h5>100% Guaranteed Chargeback</h5>
</div>
You also have the option to add it via a pseudo element.
.check-circle::before {
font-family: "Font Awesome 5 Free", sans-serif;
content: ' \f058 ';
font-size: 30px;
vertical-align: middle;
padding: 0 0.25em;
color: tomato;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<h5 class="check-circle">100% Guaranteed Chargeback</h5>
unicode value can be found on fontAwesome site at description's icon : https://fontawesome.com/v4.7.0/icon/check-circle
Related
I am trying to move this icon to the top right of the file, but I can't, does anyone know how? (I got this icon for free from fontAwesome)
Here's the code
i {
text-align: center;
}
<head>
<script src="https://kit.fontawesome.com/d1950e8188.js" crossorigin="anonymous"></script>
<i class="fa-solid fa-cart-shopping"></i>
</head>
Because fa-solid has display: inline-block by default (from this rule: display: var(--fa-display,inline-block) the text-align:right by itself won't work.
Here are a few solutions:
You can set the CSS vars --fa-display there is built in in font-awesome CSS and add text-align: right
.fa-solid.fa-cart-shopping {
--fa-display: block;
text-align: right;
}
<script src="https://kit.fontawesome.com/d1950e8188.js" crossorigin="anonymous"></script>
<i class="fa-solid fa-cart-shopping"></i>
If you like flex, you can use display: flex; justify-content: flex-end;
.fa-solid.fa-cart-shopping {
display: flex;
justify-content: flex-end;
}
<script src="https://kit.fontawesome.com/d1950e8188.js" crossorigin="anonymous"></script>
<i class="fa-solid fa-cart-shopping"></i>
You need to apply the text-align to the wrapping element:
#icon-wrapper {
text-align: right;
}
<head>
<script src="https://kit.fontawesome.com/d1950e8188.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="icon-wrapper">
<i class="fa-solid fa-cart-shopping"></i>
</div>
</body>
I'm very new to coding and have been just trying to code in my spare time. I have a code that when I go to view it has an obvious delay in the CSS. When you first load it for about a second the background will show as solid pink, the font changes, and the social media icons do not appear at the bottom of the screen. I have tried to search through here for answers, but the situations I've found that are similar to mine I didn't quite understand the answers as I have only been coding for about 3 weeks now.
Below is my HTML code and my CSS code:
/* BODY */
body {
background-image: url('https://i.ibb.co/vPn6tqR/clouds.jpg');
}
.cover-body {
background-color: #ffd5cd;
font-family: 'Libre Baskerville', serif;
color: #8675a9;
position: relative;
text-align: center;
height: 100%;
}
.cover-btn {
font-size: 80%;
font-weight: bold;
color: #8675a9;
letter-spacing: 1.5px;
border-width: medium;
}
.cover-btn:hover {
color: #2e2933;
}
.cover-header {
font-family: 'Great Vibes', cursive;
font-size: 6rem;
}
.cover-p {
margin-top: 15%;
margin-left: 20%;
font-size: 1.5rem;
}
.pc-cover-logo {
height: 6rem;
width: 7rem;
position: absolute;
right: 63%;
bottom:84%;
}
/* FOOTER */
a {
color: #8675a9;
}
a:hover {
color: #c3aed6;
}
.footer {
font-size: 80%;
margin-top: 6%;
margin-bottom: 0;
}
.social-media-icons {
word-spacing: 1.5rem;
padding-bottom: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<head>
<meta charset="utf-8">
<meta name="viewport" content ="width=device-width, initial-scale=1">
<title>Palette Clouds</title>
<!-- Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Libre+Baskerville&display=swap" rel="stylesheet">
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css" />
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/8346f7b19f.js" crossorigin="anonymous"></script>
</head>
<!-- BODY -->
<body class="cover-body">
<img alt="photo of clouds" class="pc-cover-logo" src="https://i.ibb.co/KrXCrp2/PC-Logo.png">
<p class="cover-p">welcome to</p>
<h1 class="cover-header">Palette Clouds</h1>
<button type="button" class="btn btn-outline-light cover-btn">coming soon</button>
<!-- FOOTER -->
<footer class="footer">
<div class="social-media-icons">
<a class="fab fa-twitter fa-2x" href="https://twitter.com/paletteclouds" target="_blank"></a>
<a class="fab fa-facebook-f fa-2x" href="https://www.facebook.com/PaletteClouds/" target="_blank"></a>
<a class="fab fa-instagram fa-2x" href="https://www.instagram.com/paletteclouds/" target="_blank"></a>
<a class="fas fa-envelope fa-2x" href="mailto:dionna#paletteclouds.com"></a>
</div>
<p>© 2020 Palette Clouds</p>
</footer>
</body>
</html>
Any help or suggestions would be much appreciated!!
Try adding an inline style like this:
<body class="cover-body" style="background-color: #ffd5cd;">
It makes it just that little bit faster and seems to prevent the flicker.
Update your css too:
.cover-body {
font-family: 'Libre Baskerville', serif;
color: #8675a9;
position: relative;
text-align: center;
height: 100%;
}
https://jsfiddle.net/e23udzk8/
How pages normally load is as follow:
HTML render first then css is called.
So here your image is called later (the few secs delay that you wait between html render and css), so a hack I use would be having a hidden image tag with the background source so the image source used in the background image will be loaded in the html render therefore faster and causing no delay until css load.
Also please notice that one reason of the delay is the huge size of the image so reducing the image size will decrease the loading time as well.
body {
background-image: url('https://i.ibb.co/vPn6tqR/clouds.jpg');
}
.cover-body {
background-color: #ffd5cd;
font-family: 'Libre Baskerville', serif;
color: #8675a9;
position: relative;
text-align: center;
height: 100%;
}
.cover-btn {
font-size: 80%;
font-weight: bold;
color: #8675a9;
letter-spacing: 1.5px;
border-width: medium;
}
.cover-btn:hover {
color: #2e2933;
}
.cover-header {
font-family: 'Great Vibes', cursive;
font-size: 6rem;
}
.cover-p {
margin-top: 15%;
margin-left: 20%;
font-size: 1.5rem;
}
.pc-cover-logo {
height: 6rem;
width: 7rem;
position: absolute;
right: 63%;
bottom:84%;
}
img {
display: none; //Added Code
}
<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<head>
<meta charset="utf-8">
<meta name="viewport" content ="width=device-width, initial-scale=1">
<title>Palette Clouds</title>
<!-- Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Libre+Baskerville&display=swap" rel="stylesheet">
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css" />
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/8346f7b19f.js" crossorigin="anonymous"></script>
</head>
<!-- BODY -->
<body class="cover-body">
<img alt="photo of clouds" class="pc-cover-logo" src="https://i.ibb.co/KrXCrp2/PC-Logo.png">
<p class="cover-p">welcome to</p>
<h1 class="cover-header">Palette Clouds</h1>
<button type="button" class="btn btn-outline-light cover-btn">coming soon</button>
<!-- FOOTER -->
<footer class="footer">
<div class="social-media-icons">
<a class="fab fa-twitter fa-2x" href="https://twitter.com/paletteclouds" target="_blank"></a>
<a class="fab fa-facebook-f fa-2x" href="https://www.facebook.com/PaletteClouds/" target="_blank"></a>
<a class="fab fa-instagram fa-2x" href="https://www.instagram.com/paletteclouds/" target="_blank"></a>
<a class="fas fa-envelope fa-2x" href="mailto:dionna#paletteclouds.com"></a>
</div>
<p>© 2020 Palette Clouds</p>
</footer>
<img src='https://i.ibb.co/vPn6tqR/clouds.jpg'/> //Added Code
</body>
</html>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I my html page I have a checkbox and two buttons aligned horizontally. These are populated dynamically through a PHP function. I find aligning the checkbox to exactly the same size as buttons and in line with buttons difficult.
The following is a minimal example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript file upload</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="col-xs-6 col-sm-2 text-center">
<img src="" width="200" height="200" class="img"/>
<h6>Test Image</h6>
<input type="checkbox" id="'.$imgnam.'" title="Select Image" name="matchedImage" value="'.$imgnam.'" >
<button class="actButton" id="tbutton" onclick="downloadImage(this.id)" title="Download Image" style="background-color: #CECECE;border: none;color: white;
padding:6px 10px;font-size:12px;cursor:pointer;margin:10px 0px 22px 0px"><i class="fa fa-download" style="color:#040727"></i></button>
<button class="actButton dropbtn" id="shareImage" onclick="shareImage(this.id)" title="Share Image" style="background-color:#CECECE;border: none;color: white;
padding:6px 10px;font-size:12px;cursor:pointer;margin:10px 0px 22px 0px"><i class="fa fa-share-alt" style="color:#040727"></i></button>
</div>
</body>
</html>
If I apply css to checkbox such as :
input[type=checkbox] {
width: 10em;
-webkit-appearance: none;
-moz-appearance: none;
height: 10em;
border: 0.2em solid black;
padding-top: 3px;
}
The box appears few pixels above the button. How do I align the checkbox with the buttons. Attaching an image output
Remove all padding and add the following to .actButton:
display: inline-block;
vertical-align: middle;
line-height: 32px;
height: 32px;
width: 30px
Increase the font-size to 18px. Add .actButton class to checkbox as well and remove everything but the border and appearance properties.
Also the containing <div> has been changed to a <fieldset> and class .col-sm-2 was changed to .col-sm-6 at -2 means that there's less space as the screen gets bigger, did you really want backwards behavior? If so just change back to .col-sm-2. The <main class='container'> and <section class='row'> was added as well (normally these tags would be <div> but it's just easier to read using semantically correct tags).
Demo
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid black;
}
.actButton {
display: inline-block;
vertical-align: middle;
line-height: 32px;
height: 32px;
width: 30px;
background-color: #CECECE;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
margin: 10px 0px 22px 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>JavaScript file upload</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<main class='container'>
<section class='row'>
<fieldset class="col-xs-6 col-sm-6 text-center">
<img src="https://via.placeholder.com/200" width="200" height="200" class="img" />
<h6>Test Image</h6>
<input type="checkbox" title="Select Image" name="matchedImage" class='actButton'>
<button class="actButton dropbtn" id="tbutton" title="Download Image"><i class="fa fa-download" style="color:#040727"></i></button>
<button class="actButton" id="shareImage" title="Share Image"><i class="fa fa-share-alt" style="color:#040727"></i></button>
</fieldset>
</section>
</main>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
did you mean em? It's mm in your code.
input[type=checkbox] {
width: 10em;
-webkit-appearance: none;
-moz-appearance: none;
height: 10em;
border: 0.2em solid black;
padding-top: 3px;
}
Add this line in your css for the checkbox
vertical-align: middle;
I´m trying to align some text with an icon-font icon in a button with custom height. The icon and the text should both be in the vertical center of the button with some pixels padding to the left and right side so that they both are in the horizontal center of the button. It also seems that the attribute which sets the size of the icon also doesn´t work.
/* Styles go here */
.btn-group{
margin-top: 20px;
margin-left: 20px;
}
#left, #middle, #right{
height: 25px;
}
.button-content{
}
.button-icon{
}
.button-text{
vertical-align:middle;
}
.button-text i{
font-size: 12px; /* Change of icon-size doesn´t apply */
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="btn-group">
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" id="left">
<span class="buton-content">
<span class="button-icon"><i class="material-icons">info</i></span>
<span class="button-text">CONTENT</span>
</span>
</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" id="middle">
<span class="buton-content">
<span class="button-icon"><i class="material-icons">info</i></span>
<span class="button-text">CONTENT</span>
</span>
</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" id="right">
<span class="buton-content">
<span class="button-icon"><i class="material-icons">info</i></span>
<span class="button-text">CONTENT</span>
</span>
</label>
</div>
</body>
</html>
You can also find my code on Plunker.
EDIT
I fixed all issues besides the the fact that icon and text aren't in the vertical center of the button.
The Plunker was also updated.
EDIT 2:
The problem was fixed by using #MarcosPérezGude idea
#left, #middle, #right{
height: 26px;
padding-top: 1px;
padding-bottom: 0px;
}
in addition to #iyyappan answer with the partial solution
.material-icons {vertical-align: middle;}
I checked your codes.
Please try it.
#left, #middle, #right {
height: auto;
}
.material-icons {vertical-align: middle;}
Please add vertical-align: middle; to the .material-icons class.
.material-icons {
vertical-align: middle;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.btn-group{
margin-top: 20px;
margin-left: 20px;
}
#left, #middle, #right{
height: 25px;
}
.button-content{
}
.button-icon{
}
.button-text{
vertical-align:middle;
}
.button-text i{
font-size: 12px; /* Change of icon-size doesn´t apply */
}
#left, #middle, #right {
height: auto;
}
.button-icon {
display: inline-block;
vertical-align: middle;
line-height: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="btn-group">
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" id="left">
<span class="buton-content">
<span class="button-icon"><i class="material-icons">info</i></span>
<span class="button-text">CONTENT</span>
</span>
</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" id="middle">
<span class="buton-content">
<span class="button-icon"><i class="material-icons">info</i></span>
<span class="button-text">CONTENT</span>
</span>
</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" id="right">
<span class="buton-content">
<span class="button-icon"><i class="material-icons">info</i></span>
<span class="button-text">CONTENT</span>
</span>
</label>
</div>
just remove below code from your custom css file style.css that is making issue of improper height.
#left, #middle, #right {
/* height: 26px; */
}
your custom css height is overriding the default bootstrap's buttons' height
Note: Due to that you can't getting see your content in middle but
(Actually is there in middle).
Button size in Bootstrap Reference Link
try this may help you and for changing the size of icon use font-size
#left, #middle, #right
{
height:26px;
}
.material-icons
{
vertical-align: middle;
font-size:13px;
}
.btn
{
padding:2px 12px;
}
I've been able to properly position & scale a few elements in my webpage using html & css, however due to the rules of positioning, I've gotten stuck on how to continue this action with two more elements.
The chevron icon in the picture must be below the last paragraph entitled "scroll down", & I also want it to scale with the screen size as I have been successfully able to do with the other text/elements as you can see:
here is the html:
<!DOCTYPE html>
<html>
<head>
<title>myWebpage</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />
<link href="css/font-awesome.min.css"rel="stylesheet">
<link href="main-sanctuary.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Hellloooooooooooooo!</h1>
<p id="first-p">Welcome All!<br>Make Yourself at home.</p>
<p id="secondary-p">Scroll down.</p>
<button id="logBtn">Log In</button>
<button id="signBtn">Sign Up</button>
<i class="fa fa-chevron-down fa-4x"></i>
</header>
</body>
</html>
and here is the css:
* {
margin:0;
padding:0;
}
body,html {
height: 100%;
background: honeydew;
}
/* Header*/
header {
height: 100vh;
background-image: url(https://s3-us-west-2.amazonaws.com/assests/books-apple.jpg);
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
text-align: center;
position:relative;
}
h1 {
color: honeydew;
font-family: "Helvetica Neue";
font-size : 7.5vw;
margin-bottom: 30px;
}
#first-p {
color: honeydew;
font-family: "Helvetica Neue";
font-weight: lighter;
font-style: normal;
font-size : 3.5vw;
margin-bottom: 50px;
}
#secondary-p {
position: inherit;
color: #FFD700;
font-family: "Helvetica Neue";
font-weight: lighter;
font-style: normal;
font-size : 2vw;
margin-bottom: -90px;
}
.fa {
color: #FFD700;
}
So how do I properly position the .fa under #secondary-p on my webpage & scale it as well?
Just remove margin-bottom : -90px; from #secondary-p, this will make Cheveron Icon go below Scroll Down (#sencondary-p).
And for scaling the Cheveron Icon, add font-size to it with a value in vw. Like This :-
.fa{
color : #FFD700;
font-size : 4vw;
}
Demo is here.
Update
For shifting them a little bit down, wrap the .fa element and the #sencondary-p element inside a div and give that div some margin-top. Like this :-
HTML :-
<div id="wrapper">
<p id="sencondary-p">Scroll Down</p>
<i class = "fa fa-chevron-down fa-4x"></i>
</div>
CSS :-
#wrapper{
margin-top : 100px; /*Increase the value to shift more down*/
}
See the updated demo here.
Put the chevron inside a div and set the div's position. (Use position: static, which will keep the position consistent.)