If you run the below snipped , you can see that the 'fa-enelope'email logo is being duplicated. I have never used font awesome before and am wondering if I have done something wrong.
It all changed when I included the a tag - I wonder if that has something to do with it.
I am wondering if I should just scrap the font awesome and download some other icons to use.
body {
background-image: linear-gradient(to bottom right, #FFF, #bfbfbf);
height: 100vh;
font-family: 'Tajawal', sans-serif;
}
.title {
margin-top: 1rem;
text-align: center;
font-size: 9rem;
color: transparent;
background-image: linear-gradient(to bottom right, #f47a42, #f45041);
-webkit-background-clip: text;
}
.social-icons {
display: flex;
justify-content: center;
font-size: 2.5rem;
color: #f47a42;
}
.social-icons--camera {
margin-left: 10px;
margin-right: 10px;
color: #f47a42;
}
.social-icons--github {
color: #f47a42;
}
.social-icons--email {
color: #f47a42;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>portfolio site</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="title">Adam Millington</h1>
<div class="social-icons">
<a href="mailto:someone#example.com">
<i class="social-icons--email far fa-envelope">
</a>
</i> <i class="social-icons--camera fas fa-camera-retro"></i>
<i class="social-icons--github fab fa-github" target="_blank"></i>
</div>
<hr>
</body>
</html>
You closed the envelope's <i> after the </a>
body {
background-image: linear-gradient(to bottom right, #FFF, #bfbfbf);
height: 100vh;
font-family: 'Tajawal', sans-serif;
}
.title {
margin-top: 1rem;
text-align: center;
font-size: 9rem;
color: transparent;
background-image: linear-gradient(to bottom right, #f47a42, #f45041);
-webkit-background-clip: text;
}
.social-icons {
display: flex;
justify-content: center;
font-size: 2.5rem;
color: #f47a42;
}
.social-icons--camera {
margin-left: 10px;
margin-right: 10px;
color: #f47a42;
}
.social-icons--github {
color: #f47a42;
}
.social-icons--email {
color: #f47a42;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>portfolio site</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="title">Adam Millington</h1>
<div class="social-icons">
<a href="mailto:someone#example.com">
<i class="social-icons--email far fa-envelope"></i>
</a>
<i class="social-icons--camera fas fa-camera-retro"></i>
<i class="social-icons--github fab fa-github" target="_blank"></i>
</div>
<hr>
</body>
</html>
You closed your i tag after a instead of before
body {
background-image: linear-gradient(to bottom right, #FFF, #bfbfbf);
height: 100vh;
font-family: 'Tajawal', sans-serif;
}
.title {
margin-top: 1rem;
text-align: center;
font-size: 9rem;
color: transparent;
background-image: linear-gradient(to bottom right, #f47a42, #f45041);
-webkit-background-clip: text;
}
.social-icons {
display: flex;
justify-content: center;
font-size: 2.5rem;
color: #f47a42;
}
.social-icons--camera {
margin-left: 10px;
margin-right: 10px;
color: #f47a42;
}
.social-icons--github {
color: #f47a42;
}
.social-icons--email {
color: #f47a42;
}
<head>
<meta charset="UTF-8">
<title>portfolio site</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="title">Adam Millington</h1>
<div class="social-icons">
<a href="mailto:someone#example.com">
<i class="social-icons--email far fa-envelope"></i>
</a>
<a href="https://unsplash.com/#adammillingtonphotography" target="_blank">
<i class="social-icons--camera fas fa-camera-retro"></i></a>
<i class="social-icons--github fab fa-github" target="_blank"></i>
</div>
<hr>
</body>
Related
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
.navbar {
background-color: #000000;
border-color: 1px solid #000000;
}
.card-box {
border-radius: 2.5rem;
padding-bottom: 10px;
margin-top:25px;
background-color: #000000b0;
box-shadow: 1px 1px 5px 1px grey;
}
.portfolio-item {
/* height: 250px; */
text-align: center;
}
.row {
margin: 0px;
}
h3 {
margin: 10px;
}
.app_rstudio, .app_rstudio-super {
margin-left: 15%;
}
.fa, .far, .fas, .fab {
font-size: 96px;
color: #55b0ff;
margin: 15px;
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head lang="en">
<title th:text="${title}"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" media="screen" th:href="#{${bootstrapCss}}" />
<link rel="stylesheet" media="screen" th:href="#{/css/default.css}"/>
<script th:src="#{${jqueryJs}}"></script>
<script th:src="#{${bootstrapJs}}"></script>
</head>
<body>
<img src="https://i.ibb.co/2Ww4xTB/background.png" id="bg" alt="">
<div th:replace="../fragments/navbar :: navbar"></div>
<div class="container" id="applist">
<div class="row" >
<div th:each="app: ${apps}">
<div th:class="${'col-md-4 portfolio-item app_' + app.id}">
<div class="card-box">
<a th:href="#{/app/}+${app.id}">
<i th:class="${app.logoURL}"></i>
</a>
<h3>
<a th:href="#{/app/}+${app.id}" th:text="${app.displayName == null} ? ${app.id} : ${app.displayName}" style="color: #55b0ff;"></a>
</h3>
<a th:if="${app.description != null}" th:href="#{/app_direct/}+${app.id + '/'}" style="color: #55b0ff; font-style: italic;" target="_blank">
<p th:text="${app.description}"></p>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I added the following CSS code to my HTML document:
body {
background-color: #333;
background-image: url(/assets/img/background.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
color: rgb(202, 202, 202);
}
But the image does not fill the browser window as expected. Where did I go wrong?
Here is the entire HTML code (probably more than you need but I'm not sure which bits are relevant):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head lang="en">
<title th:text="${title}"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" media="screen" th:href="#{${bootstrapCss}}" />
<link rel="stylesheet" media="screen" th:href="#{/css/default.css}"/>
<script th:src="#{${jqueryJs}}"></script>
<script th:src="#{${bootstrapJs}}"></script>
<style type="text/css">
body {
background-color: #333;
background-image: url(/assets/img/background.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
color: rgb(202, 202, 202);
}
.navbar {
background-color: #000000;
border-color: 1px solid #000000;
}
.card-box {
border-radius: 2.5rem;
padding-bottom: 10px;
margin-top:25px;
background-color: #000000b0;
box-shadow: 1px 1px 5px 1px grey;
}
.portfolio-item {
/* height: 250px; */
text-align: center;
}
.row {
margin: 0px;
}
h3 {
margin: 10px;
}
.app_rstudio, .app_rstudio-super {
margin-left: 15%;
}
.fa, .far, .fas, .fab {
font-size: 96px;
color: #55b0ff;
margin: 15px;
}
</style>
</head>
<body>
<div th:replace="../fragments/navbar :: navbar"></div>
<div class="container" id="applist">
<div class="row" >
<div th:each="app: ${apps}">
<div th:class="${'col-md-4 portfolio-item app_' + app.id}">
<div class="card-box">
<a th:href="#{/app/}+${app.id}">
<i th:class="${app.logoURL}"></i>
</a>
<h3>
<a th:href="#{/app/}+${app.id}" th:text="${app.displayName == null} ? ${app.id} : ${app.displayName}" style="color: #55b0ff;"></a>
</h3>
<a th:if="${app.description != null}" th:href="#{/app_direct/}+${app.id + '/'}" style="color: #55b0ff; font-style: italic;" target="_blank">
<p th:text="${app.description}"></p>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I also tried (and failed) to use an approach described here which suggests using the following CSS:
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
And HTML:
<img src="images/bg.jpg" id="bg" alt="">
In this case, the background will not fill the screen if the device you are using is portrait.
Try adding this to your style:
html {
min-height:100%;
}
The problem has to be with your local file path because when adding a url it works fine as seen below:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head lang="en">
<title th:text="${title}"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" media="screen" th:href="#{${bootstrapCss}}" />
<link rel="stylesheet" media="screen" th:href="#{/css/default.css}"/>
<script th:src="#{${jqueryJs}}"></script>
<script th:src="#{${bootstrapJs}}"></script>
<style type="text/css">
body {
background-color: #333;
background-image: url("https://images.unsplash.com/photo-1558481795-7f0a7c906f5e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1373&q=80");
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
color: rgb(202, 202, 202);
width: 100%;
height: 1600%;
z-index: -1;
}
.navbar {
background-color: #000000;
border-color: 1px solid #000000;
}
.card-box {
border-radius: 2.5rem;
padding-bottom: 10px;
margin-top:25px;
background-color: #000000b0;
box-shadow: 1px 1px 5px 1px grey;
}
.portfolio-item {
/* height: 250px; */
text-align: center;
}
.row {
margin: 0px;
}
h3 {
margin: 10px;
}
.app_rstudio, .app_rstudio-super {
margin-left: 15%;
}
.fa, .far, .fas, .fab {
font-size: 96px;
color: #55b0ff;
margin: 15px;
}
</style>
</head>
<body>
<div th:replace="../fragments/navbar :: navbar"></div>
<div class="container" id="applist">
<div class="row" >
<div th:each="app: ${apps}">
<div th:class="${'col-md-4 portfolio-item app_' + app.id}">
<div class="card-box">
<a th:href="#{/app/}+${app.id}">
<i th:class="${app.logoURL}"></i>
</a>
<h3>
<a th:href="#{/app/}+${app.id}" th:text="${app.displayName == null} ? ${app.id} : ${app.displayName}" style="color: #55b0ff;"></a>
</h3>
<a th:if="${app.description != null}" th:href="#{/app_direct/}+${app.id + '/'}" style="color: #55b0ff; font-style: italic;" target="_blank">
<p th:text="${app.description}"></p>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want to use different icons from different stylesheets as not all the icons are available in 1 stylesheet that I wanted to use. When I tryto do that it causes the height problem.One icon leaves in upside and leaves some bottom space and another icon looks as it is required to be. What can be done to align them with same height? if you see the height of last icon of font awesome left some bottom space...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
.footer a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 0px;
text-decoration: none;
font-size: 17px;
width:20%;
bottom:0;
margin-bottom:0;
}
.footer a:hover {
background-color: #ddd;
color: black;
}
.footer a.active {
background-color: #2196F3;
color: white;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="fa fa-tachometer"></i>
</div>
</body>
</html>
Change you footer to display as flex could solve the issue:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
display: flex;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
.footer a {
/* float: left; */
display: flex; /* Consider flex layout */
color: black;
justify-content: center; /* Alignment of icons */
padding: 14px 0px;
text-decoration: none;
font-size: 17px;
width:20%;
bottom:0;
margin-bottom:0;
}
.footer a:hover {
background-color: #ddd;
color: black;
}
.footer a.active {
background-color: #2196F3;
color: white;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="fa fa-tachometer"></i>
</div>
</body>
</html>
try this, added line-height and font-size to 'i' tag
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
.footer a {
float: left;
display: block;
color: black;
text-align: center;
text-decoration: none;
/*removed padding*/
width:20%;
bottom:0;
margin-bottom:0;
}
.footer a:hover {
background-color: #ddd;
color: black;
}
.footer a.active {
background-color: #2196F3;
color: white;
}
/* added this */
.footer a i{
font-size: 24px;
line-height: 50px;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="fa fa-tachometer"></i>
</div>
</body>
</html>
:root {
--gray: #CBC4C4;
--blue: #029DF1;
--white: #FFF;
--black: #000;
--secondBlue: #0089D3;
}
* {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
color: var(--white);
}
#container {
margin: 100px auto;
background-color: var(--blue);
width: 300px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px 0px;
}
p, i {
margin-right: 50px;
}
i {
border-left: 1px solid var(--gray);
border-right: 1px solid var(--gray);
padding: 0px 20px;
height: inherit;
color: var(--black);
}
i:hover {
background-color: var(--secondBlue);
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/1f5460a8a6.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Stopwatch</title>
</head>
<body>
<div id="container">
<p id="timeArea">Blank</p>
<!-- <i id="pauseButton" class="fas fa-pause fa-2x"></i> -->
<i id="playButton" class="fas fa-play fa-2x"></i>
<p id="reset">Reset</p>
</div>
<script src="script.js"></script>
</body>
</html>
I am wanting to matching the height of the borders to the amount of padding I have set for my i element. Here is a jsfiddle visualizing how it looks.
What I have done so far is set the height to 100%, given the container div and i element a box-sizing: border-box property, but they have not worked. How can I proceed?
To be specific to your answer,
Remove padding from container
Assign padding to i
:root {
--gray: #CBC4C4;
--blue: #029DF1;
--white: #FFF;
--black: #000;
--secondBlue: #0089D3;
}
* {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
color: var(--white);
}
/*REMOVED FROM HERE*/
#container {
margin: 100px auto;
background-color: var(--blue);
width: 300px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
p,
i {
margin-right: 50px;
}
/*ADDED HERE*/
i {
border-left: 1px solid var(--gray);
border-right: 1px solid var(--gray);
padding: 20px;
height: inherit;
color: var(--black);
}
i:hover {
background-color: var(--secondBlue);
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/1f5460a8a6.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Stopwatch</title>
</head>
<body>
<div id="container">
<p id="timeArea">Blank</p>
<!-- <i id="pauseButton" class="fas fa-pause fa-2x"></i> -->
<i id="playButton" class="fas fa-play fa-2x"></i>
<p id="reset">Reset</p>
</div>
</body>
</html>
:root {
--gray: #CBC4C4;
--blue: #029DF1;
--white: #FFF;
--black: #000;
--secondBlue: #0089D3;
}
* {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
color: var(--white);
}
.container {
display: flex;
background: royalblue;
width: 300px;
align-items: center;
justify-content: center;
margin: auto;
}
.box {
display: flex;
padding: 10px;
flex: 1;
justify-content: center;
}
.playButton {
border-left: 2px solid white;
border-right: 2px solid white;
}
.playButton:hover {
background-color: rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/1f5460a8a6.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Stopwatch</title>
</head>
<body>
<div class="container">
<div class="box">
<p>Blank</p>
</div>
<div class="playButton box">
<i id="playButton" class="fas fa-play fa-2x"></i>
</div>
<div class="box">
<p>Reset</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
You have to remove the padding from the #container div and place the 10px top and bottom padding to your i element otherwise your left and right border height will always be less than the #container div.
:root {
--gray: #CBC4C4;
--blue: #029DF1;
--white: #FFF;
--black: #000;
--secondBlue: #0089D3;
}
* {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
color: var(--white);
}
#container {
margin: 100px auto;
background-color: var(--blue);
width: 300px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
p, i {
margin-right: 50px;
}
i {
border-left: 1px solid var(--gray);
border-right: 1px solid var(--gray);
padding: 10px 20px;
height: inherit;
color: var(--black);
}
i:hover {
background-color: var(--secondBlue);
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/1f5460a8a6.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Stopwatch</title>
</head>
<body>
<div id="container">
<p id="timeArea">Blank</p>
<!-- <i id="pauseButton" class="fas fa-pause fa-2x"></i> -->
<i id="playButton" class="fas fa-play fa-2x"></i>
<p id="reset">Reset</p>
</div>
<script src="script.js"></script>
</body>
</html>
.add-cart-button
{
width:205px;
height:56px;
border-radius: 28px;
background-color: #EC7F4A;
color: #ffff;
font-family: Roboto;
}
.add-cart-button-icon
{
color: #232323;
float: right;
font-size: 40px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="add-cart-button">
<span>Add to Cart</span><i class="fa fa-plus-circle fa-6 add-cart-button-icon" aria-hidden="true"></i>
</button>
I'm using Bootstrap4 doubt in button that i need to display button along with fontawosome icon.can any one please tell me to do it.
Expected image
Actual output i got now
Image of Actual output i got now
You can simply add <i> tag inside button.
EDIT: I've added your code to same snippet. Just adding line-height: 40px; to add-cart-button class provides the alignment fix.
.round-btn {
border-radius: 19px !important;
}
.add-cart-button {
width: 205px;
height: 56px;
border-radius: 28px;
background-color: #EC7F4A;
color: #ffff;
font-family: Roboto;
line-height: 40px;
}
.add-cart-button-icon {
color: #232323;
float: right;
font-size: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<button type="button" class="btn btn-warning round-btn">Warning<i class="pl-2 fa fa-plus-circle"></i></button>
<button class="add-cart-button">
<span>Add to Cart</span><i class="fa fa-plus-circle fa-6 add-cart-button-icon" aria-hidden="true"></i>
</button>
</div>
</body>
</html>
so im coding up this pizza site and ive got a problem - i wanted to put the place's logo in the navbar (which is also a link to main page) but i cannot get it to be displayed. im using twitter bootstrap. here's the code:
/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
padding-top: 80px;
}*/
body {
font-family: 'news cycle', serif;
background-color: #660000;
}
.navbar {
background-color: #557c3e;
position: relative;
height: 180px;
border-radius: 0;
border: 0;
}
.row {
display: flex;
justify-content: center;
}
#logo {
background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png');
width: 431px;
height: 146px;
margin-left: 15px;
}
.nav-pills {
text-transform: uppercase;
font-size: 1.5em;
text-align: center;
vertical-align: center;
margin-top: 45px;
}
.nav-pills span, a {
color: #F8B004;
}
.nav-pills span {
font-size: 150%;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
background-color: #f2f2f2;
border-color: #f2f2f2;
color: #F8B004;
}
#logoFB {
max-width: 100px;
}
#logoFB:hover{
background-color: #557c3e;
border-color: #557c3e;
color: #557c3e;
}
ul > li {
margin-right: 50px;
}
h2 {
text-align: center;
color: #F8B004;
line-height: 2;
}
#promocje {
color: #F8B004;
font-size: 1.5em;
}
h2> ol > li:hover {
background-color: #F2F2F2;
color: #976a02;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kontakt - Wzgórze Smaków</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="index.html"><div id="logo"></div></a>
<ul class="nav nav-pills">
<li role="presentation"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</li>
<li role="presentation"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</li>
<li role="presentation" class="active"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</li>
<li><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></li>
<li><a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="wzgorzeSmakowMarcin/facebook.png" id="logoFB"></a></li>
</ul>
</div>
</div>
</nav>
<div class="container" id="glowna">
<!-- glowna czesc -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h2>Puszczykowo, ul. Dworcowa 58
<div>691 671 702</div>
<div>ZAPRASZAMY!</div>
</h2>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
jsfiddle
Hi now you just define to margin-right:20px; in your li as like htis
.nav-pills>li+li {
margin-right: 20px;
}
/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
padding-top: 80px;
}*/
body {
font-family: 'news cycle', serif;
background-color: #660000;
}
.navbar {
background-color: #557c3e;
position: relative;
height: 180px;
border-radius: 0;
border: 0;
}
.row {
display: flex;
justify-content: center;
}
#logo {
background-image: url('http://economictimes.indiatimes.com/photo/33185989.cms');
width: 431px;
height: 146px;
margin-left: 15px;
}
.nav-pills {
text-transform: uppercase;
font-size: 1.5em;
text-align: center;
vertical-align: center;
margin-top: 45px;
}
.nav-pills span, a {
color: #F8B004;
}
.nav-pills span {
font-size: 150%;
}
.nav-pills>li+li {
margin-right: 20px;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
background-color: #f2f2f2;
border-color: #f2f2f2;
color: #F8B004;
}
#logoFB {
max-width: 100px;
}
#logoFB:hover{
background-color: #557c3e;
border-color: #557c3e;
color: #557c3e;
}
ul > li {
margin-right: 50px;
}
h2 {
text-align: center;
color: #F8B004;
line-height: 2;
}
#promocje {
color: #F8B004;
font-size: 1.5em;
}
h2> ol > li:hover {
background-color: #F2F2F2;
color: #976a02;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kontakt - Wzgórze Smaków</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="index.html"><div id="logo"></div></a>
<ul class="nav nav-pills">
<li role="presentation"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</li>
<li role="presentation"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</li>
<li role="presentation" class="active"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</li>
<li><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></li>
<li><a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="http://economictimes.indiatimes.com/photo/33185989.cms" id="logoFB"></a></li>
</ul>
</div>
</div>
</nav>
<div class="container" id="glowna">
<!-- glowna czesc -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h2>Puszczykowo, ul. Dworcowa 58
<div>691 671 702</div>
<div>ZAPRASZAMY!</div>
</h2>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Please do refer the css code and also do check the image path is correct..
#logo {
background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png');
background-repeat: no-repeat;
width: 431px;
height: 146px;
margin-left: 15px;
background-size: contain;
background-position: center center;
}
I have just add my website logo and it's working fine. Have a look
/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
padding-top: 80px;
}*/
body {
font-family: 'news cycle', serif;
background-color: #660000;
}
.navbar {
background-color: #557c3e;
position: relative;
height: 180px;
border-radius: 0;
border: 0;
}
.row {
display: flex;
justify-content: center;
}
#logo {
background-image: url('http://www.dezaro.com/siteimg/logo.png') ;
background-repeat:no-repeat;
width: 431px;
height: 146px;
margin-left: 15px;
}
.nav-pills {
text-transform: uppercase;
font-size: 1.5em;
text-align: center;
vertical-align: center;
margin-top: 45px;
}
.nav-pills span,
a {
color: #F8B004;
}
.nav-pills span {
font-size: 150%;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
background-color: #f2f2f2;
border-color: #f2f2f2;
color: #F8B004;
}
#logoFB {
max-width: 100px;
}
#logoFB:hover {
background-color: #557c3e;
border-color: #557c3e;
color: #557c3e;
}
ul > li {
margin-right: 50px;
}
h2 {
text-align: center;
color: #F8B004;
line-height: 2;
}
#promocje {
color: #F8B004;
font-size: 1.5em;
}
h2> ol > li:hover {
background-color: #F2F2F2;
color: #976a02;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kontakt - Wzgórze Smaków</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="index.html">
<div id="logo"></div>
</a>
<ul class="nav nav-pills">
<li role="presentation"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</li>
<li role="presentation"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</li>
<li role="presentation" class="active"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</li>
<li><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></li>
<li>
<a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="wzgorzeSmakowMarcin/facebook.png" id="logoFB"></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="glowna">
<!-- glowna czesc -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342"
width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h2>Puszczykowo, ul. Dworcowa 58
<div>691 671 702</div>
<div>ZAPRASZAMY!</div>
</h2>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>