Why is the icon being not positioned under the email address and phone number fields? I know I could probably solve this by placing them in a div but there must be a simple reason for this. Could you explain what is happening and show me how to fix it. Thanks
footer {
width: 100%;
background-color: black;
color: #fff;
}
#foot-address {
list-style-type: none;
display: inline-block;
margin: 2em 2em;
}
#foot-contact {
list-style-type: none;
display: inline-block;
vertical-align: top;
margin: 0 0 0 2em;
}
#facebook-icon {
color: #fff;
display: inline-block;
}
<html>
<head>
<script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
</head>
<footer>
<ul id="foot-address">
<li>12 The Cross</li>
<li>Bramhope</li>
<li>Leeds</li>
<li>LS16 9AX</li>
</ul>
<ul id="foot-contact">
<li>popsiesfishandchips#yahoo.co.uk</li>
<li>0113 2842178</li>
</ul>
<i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i>
<hr>
</footer>
https://jsfiddle.net/dsohk0nz/
I created the fiddle below. Please check and tell me if its not exactly what you want.
<ul id="foot-contact">
<li>popsiesfishandchips#yahoo.co.uk</li>
<li>0113 2842178</li>
<li><i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i> </li>
</ul>
https://jsfiddle.net/dsohk0nz/1/
For a quick fix (without regard to the rest of the layout), change the last CSS rule to this:
#facebook-icon {
color: #fff;
display: block;
width: 30px;
margin: 0 auto;
}
https://jsfiddle.net/a5wL2vz7/1/
Or do you mean something like this: https://jsfiddle.net/11bn4m0o/1/
Here I moved the a tag with the icon into the ul tag that contains the mail address.
In #facebook-icon you have used inline-block.Replace it with block.
Like this:
#facebook-icon{
color: #fff;
display:block;
}
Just put the link inside a <li> in your <ul id="foot-contact"> and facebook icon will appear bellow your email and phone number.
<footer>
<ul id="foot-address">
<li>12 The Cross</li>
<li>Bramhope</li>
<li>Leeds</li>
<li>LS16 9AX</li>
</ul>
<ul id="foot-contact">
<li>popsiesfishandchips#yahoo.co.uk</li>
<li>0113 2842178</li>
<li>
<a href="#" id="facebook-icon">
<i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i>
</a>
</li>
</ul>
</footer>
Related
I'm trying to use icons inside my lateral menu but when i put the icon, the font-family changes.
like this
theres a way to put an icon inside the bar, without changes the whole font-family?
<!--Programmed by: João Lucas-->
<!--started in: 20220713 05:00am -->
<!--Last edit: 20220713 07:22am-->
<!--version: 1.0-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home Page</title>
<script src="https://kit.fontawesome.com/d24d1f29c0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="hpstyle.css">
</head>
<body>
<ul id="sidebar">
<div id="imgsidebar">
<img src="logo_main.png" id="logosidebar">
</div>
<li><a class="fa fa-home" href="/index.html"> Inicio</a></li>
<li> Configuracoes</li>
<li> Clientes</li>
<li> Fornecedores</li>
<li> Produtos</li>
<li> Estoque</li>
<li> Eventos</li>
<li> Relatórios Gerais</li>
<li> Nota Fiscal</li>
<li> Produção</li>
<li> Compras</li>
<li> Delivery/Encomendas</li>
<li> Vendas</li>
<li> Financeiro</li>
<li> Downloads</li>
</ul>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
color: #000;
font-size: 14px;
background-color: #111;
font-family: roboto;
}
#sidebar {
width: 200px;
margin: 10px; padding: 0;
background: #222;
list-style-type: none;
border-radius: 4px;
height:900px;
}
#imgsidebar{
display: flex;
justify-content: center;
padding: 12px;
}
#sidebar a {
color: #666;
text-decoration: none;
padding: 10px;
display: block;
}
/* animação quando passa o mouse */
#sidebar a:hover {
background: #302f2f;
color: rgb(255, 255, 255);
}
Is there any way (example of code), that I can use so as to inherit the same font-family which is used in the webiste, after using a font awesome icon?
Thank you so much for your time.
The icon should be in a separate <i> tag, e.g:
<i class="fa fa-home fa-fw" aria-hidden="true"></i>Inicio
You're using your classes inside the <a> tag too:
<li><a class="fa fa-home" href="/index.html"> Inicio</a></li>
Think of font-awesome as a separate entity. Check the docs for more info.
Here's a snippet:
<script src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<i class="fa fa-home fa-fw" aria-hidden="true"></i> Inicio</a>
I am struggling to make my <a> take 100% height of <li> element and i want to do this because when i hover over <a> i want it to get background color and to change its color to white.
this is how it should look like
I have tried giving my <a> height:100%
but this is my result
on second picture i cut out the piece and zoomed it in so you guys can see better
i found one answer on other stack overflow thread where you would give <ul> display:table and give height:0 and then give <li> height:100% but it doesnt work for me.
PLEASE NOTE THAT IM USING BOOTSTRAP 4.0.0alpha and SASS(SCSS)
HTML
<div class="topContact hidden-md-down">
<div class="container">
<div class="row">
<ul class="contactInfo">
<li class="d-inline-block"><i class="far fa-envelope"></i>info#reen.com</li>
<li class="d-inline-block"><i class="fas fa-mobile-alt"></i>+00 (123) 456 78 90</li>
</ul>
<ul class="socialIcons ml-auto">
<li class="d-inline-block"><i class="fab fa-facebook-f"></i></li>
<li class="d-inline-block"><i class="fab fa-google-plus-g"></i></li>
<li class="d-inline-block"><i class="fab fa-twitter"></i></li>
<li class="d-inline-block"><i class="fab fa-pinterest-p"></i></li>
<li class="d-inline-block"><i class="fab fa-behance"></i></li>
<li class="d-inline-block"><i class="fab fa-dribbble"></i></li>
</ul>
</div>
</div>
</div>
SCSS
.topContact{
background-color: #f5f7fa;
border-bottom: 1px solid #e6e9ed;
ul{
padding:0px 15px 0px 15px;
margin:0;
}
a:hover{
background: indigo;
}
a{
height: 100%;
}
.contactInfo li,
.contactInfo a,
.socialIcons a{
font-size: 10pt;
color: #506a85;
}
.contactInfo a:hover{
text-decoration: none;
color: #00bc9c;
}
.contactInfo svg,{
margin-right: 8px;
}
.contactInfo li{
padding-right: 20px;
}
}
In order for a child element to assume 100% height of the parent element, the parent element must have its size set. Its not enough to give your <li> element a font size for its <a> child to extend its height to cover it. The <li> must inherit the height from its parent or have it defined. Also, your <a> element must be a block or inline-block element to accept height.
Try:
<style type="text/css">
ul#socialIcons, ul#socialIcons>li { margin:0px; padding:0px; list-style:none; }
ul#socialIcons>li>a { display:block; font-size:1em; margin:0px; padding:0.5em; }
</style>
Also I recommend that you take a look at the concept of HTML box model: https://www.w3schools.com/css/css_boxmodel.asp
I am trying to customise the following icon bar (as shown in w3schools) - code pasted below along with link, to display like the image shown. The icons need to have text right underneath them (labels). This is NOT trivial as you'll see if you continue to read the description of the problem.
Furthermore, I'd like to add hover-over text to these icons, as shown.
Any solutions/suggestions appreciated.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_icon_bar_h
<!DOCTYPE html>
<html>
<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 {margin:0;}
.icon-bar {
width: 100%;
background-color: #666;
overflow: auto;
}
.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
.active {
background-color: #44444 !important;
}
</style>
<body>
<div class="icon-bar">
<i class="fa fa-user"></i>
<i class="fa fa-mortar-board"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-download"></i>
</div>
</body>
</html>
In the image shown, the icon bar is placed over a green background image. I would like the text to appear directly underneath, and for there also to be hover-over text to appear.
I have tried the below, but it is incredibly difficult to get the layout correct. Is there a better way?
<div class="icon-bar">
<i class="fa fa-user"></i>
<i class="fa fa-mortar-board"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-download"></i>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<p><font color="white">Topic1 Topic2 Topic3 Topic4</font></p>
<br>
<br>
<br>
<br>
Furthermore, a design flaw with adding text that way is on mobile sites the formatting will be entirely lost. see image below.
Any ideas to most effectively do this would be a great help!
this is for the w3 school code
I just changed the way of writing the icon and the text .
its not possible to look the iconbar same way in all screen size either put dropdown button or vertical display ,I have written that for vertical display ,. I havent changed padding . Since i dont know much what you want
I can help you with bootstrap if you want in bootstrap i think that will be easy for you .
<!DOCTYPE html>
<html>
<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 {margin:0;}
.icon-bar {
width: 100%;
background-color: #555;
overflow: auto;
}
.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
.icon-bar a{
text-decoration:none;
}
.active {
background-color: #4CAF50 !important;
}
#media only screen and (max-width: 700px) {
.icon-bar a {
width:100% !important;
}
}
</style>
<body>
<div class="icon-bar">
<a class="active" href="#">
<ul style="list-style:none">
<li><i class="fa fa-home"></i></li>
<li>home</li>
</ul>
</a>
<a href="#">
<ul style="list-style:none" class="menu_ul">
<li><i class="fa fa-search"></i></li>
<li>search</li>
</ul>
</a>
<a href="#">
<ul style="list-style:none" class="menu_ul">
<li><i class="fa fa-envelope"></i></li>
<li>mail</li>
</ul>
</a>
<a href="#">
<ul style="list-style:none" class="menu_ul">
<li><i class="fa fa-globe"></i></li>
<li>web</li>
</ul>
</a>
<a href="#">
<ul style="list-style:none" class="menu_ul">
<li><i class="fa fa-trash"></i></li>
<li>delete</li>
</ul></a>
</div>
</body>
Try this,
.icon-bar{
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.icon-bar a {
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
This will affect all the a tags of .icon-bar class.
Also here's some documentation on how display flex works, https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Can someone help me understand how can I vertical align this?
JSFIDDLE
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.0.46/css/materialdesignicons.css"
></link>
<aside class="menu column is-2 full-height">
<ul class="menu-list">
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
</ul>
</aside>
I need align icon and text next to it?
there is some more css since I'm using bulma.io and something custom but not so relevant I think
You can delete that css and create new one if it is not ok
There's a few options at your disposal, depending on your needs.
Updated jsFiddle
Use display: inline-block; on the element(s) that are next to each other and need to be aligned. Then you can use vertical-align: [top|middle|baseline] as needed for each element
i, span {
display: inline-block;
vertical-align: middle;
}
If that alignment doesn't work for you, then you should set the vertical-align to top, to get them positioned how you like, and then you can use line-height to fine-tune the vertical positioning of each element. Example:
i, span {
display: inline-block;
vertical-align: top;
}
i {
line-height: 39px;
}
span {
line-height: 39px;
}
You can add display: flex and align-items: center rules to li a
fiddle
aside {
background-color: #0067ad;
height: 100%;
}
li a {
display: flex;
align-items: center;
}
.menu-list {
list-style: none;
}
i {
color: white;
}
a:hover,
a:active,
.router-link-active {
background-color: black;
}
span {
color: white;
}
}
a {
color: white
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.0.46/css/materialdesignicons.css" rel="stylesheet"/>
<aside class="menu column is-2 full-height">
<ul class="menu-list">
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
</ul>
</aside>
This is a program code to implement a side menu bar. It consists of two drop down sub menus. The menus 'Apps' and 'Layout' are display when user click on it. Initially I set the color value of sub menu item as red, but which displays a color pink. How can I fix it?
function displaySubMenu(e){
var k=e;
if(k==2)
{
document.getElementById("sub-menu-one").style.display="block";
document.getElementById("sub-menu-two").style.display="none";
}
else if(k==3)
{
document.getElementById("sub-menu-two").style.display="block";
document.getElementById("sub-menu-one").style.display="none";
}
else
{
document.getElementById("sub-menu-one").style.display="none";
document.getElementById("sub-menu-two").style.display="none";
}
}
.flip-menu-text{
text-align: left;
font-weight: 500;
opacity: 1;
line-height: 1.125rem;
padding: .5625rem 0;
margin: 0;
outline: 0;
border: 0;
font-size: 1em;
}
.flip-sub-menu{
opacity: 0.75;
padding-top: .4375rem;
padding-bottom: .4375rem;
padding-left: 2rem;
text-align: left;
line-height: 1.125rem;
display:block;
background-color:#1a1a65;
/* color: rgba(255,255,255,.87)!important;*/
color: red;
width: 100%;
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<li class="flip-container-main-menu-parent" onclick="displaySubMenu(1)">
<i class="flip-menu-main-icon fa fa-glass "></i>
<span class="flip-menu-text">Dashboard</span>
</li>
<li class="flip-container-main-menu-parent" onclick="displaySubMenu(2)">
<i class="flip-menu-main-icon fa fa-th"></i>
<span class="flip-menu-text">Apps</span>
<i class="flip-menu-drop-down-icon fa fa-caret-down"></i>
<ul id="sub-menu-one" class="flip-sub-menu">
<li> Inbox </li>
<li> Condact </li>
<li> Calendar </li>
</ul>
</li>
<li class="flip-container-main-menu-parent" onclick="displaySubMenu(3)"><i class="flip-menu-main-icon fa fa-th-large"></i><span class="flip-menu-text">Layout</span><i id="me" class="flip-menu-drop-down-icon fa fa-caret-down"></i>
<ul id="sub-menu-two" class="flip-sub-menu">
<li> Header </li>
<li> Aside </li>
<li> Footer </li>
</ul>
</li>
<li class="flip-container-main-menu-parent" onclick="displaySubMenu(4)"><i class="flip-menu-main-icon fa fa-align-justify"></i><span class="flip-menu-text">Widjet</span></li>
Use this css
ul.flip-sub-menu li a {
color: red;
}