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>
Related
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
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>
I want to create a CSS class that, when applied to a div or a p element will place that text in a colored box with an icon based on a unicode character vertically centered to the left of the text. This is to use to create "To Do", "Note", "Warning" type call outs.
For example I have this so far:
.todo {
background-color: lightyellow;
float: right;
border: solid black 1px;
padding: 10px;
max-width: 30%;
}
.todo:before {
content: "\2714";
font-size: 250%;
}
The usage of this class:
<div class="todo">
This is something that really needs to be done.
Even if you don't want to still do it.
</div>
Gives me a result like:
What I would like to do is make the check-mark bigger (my font-size term seems to be ignored) and place it vertically centered in the box and to the left of all text. Can this be done without requiring styling or
other elements in the div itself?
Well, you started right with :before but use position to define its position and alignment.
.tick{
padding-left: 15px;
position: relative;
}
.tick::before {
content: '\2713';
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
}
<p class="tick">To do</p>
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
}
ul {
background-color: lightyellow;
float: left;
border: solid black 1px;
padding: 10px;
max-width: 30%;
}
ul li {
margin: 0;
padding: 0;
list-style-type: none;
font-weight: 500;
}
ul .icon {
float: left;
font-size: 22px;
padding: 0 15px 0 0;
}
</style>
</head>
<body>
<ul>
<li>
<i class="fa fa-check icon"></i>
<p>This is something that really needs to be done. Even if you don't want to still do it. This is something that really needs to be done. Even if you don't want to still do it.</p>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
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.
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;
}