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>
Related
where can I get the original Font Awesome fa fa icon image link, I use web Developers Tools [Ctrl+Shift+C] and I don't see any link when I click fa fa icons.
example: fontawesome.com/image/fafa/user-circle-o.png
You can try in this way :
Call Font Awesome in Your Files
Place this code, which contains everything you need, within the of each template or page that you want to use Font Awesome on.
Ex. -
ul li {
list-style-type: none;
display: inline-block;
width: 30px;
height: 30px;
background-color: #fff;
text-align: center;
border-radius: 100%;
margin: 0 11px;
}
i {
padding-top: 20%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<ul>
<li><i class="fa fa-download"></i>
</li>
<li><i class="fa fa-upload"></i>
</li>
<li><i class="fa fa-trash"></i>
</li>
</ul>
1) All the elements in the first div have font-size 16px. But it looks like the Facebook icon is taller than the twitter icon. How can I make it, that it has same height?
2) The Facebook icon in the second div look like it is taller than the font-size and the Twitter icon looks like it is smaller than the font-size. How can I change the height of the icons, that they have the same height like the font-size?
Or know someone an alternative to font-awesome where all icons have same height?
Here's my current code (YOU SHOULD CLICK ON "Run Code Snippet" -> "FULL PAGE"):
/* ########################################################################## */
/* Global Settings */
/* ########################################################################## */
html, body{
width: 100%;
height:100%;
font-family: Arial, sans-serif;
font-size: 16px;
}
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
/* ########################################################################## */
/* Clearfix-Hack */
/* ########################################################################## */
.clearfix::after{
content:"";
clear:both;
display: block;
}
/* ########################################################################## */
/* Entire Page */
/* ########################################################################## */
.entire-page{
margin: 0 15%;
}
/* ########################################################################## */
/* Menu */
/* ########################################################################## */
.container{
width:100;
text-align:center;
}
nav a{
text-decoration: none;
color: #666;
}
nav li{
float: left;
background-color: #aaa;
padding: 30px 30px;
}
.group2{
display: inline-block;
margin:0 auto;
}
.group2 .fa-facebook,
.group2 .fa-twitter{
font-size:16px;
line-height:16px;
vertical-align:baseline;
}
.social-icons:hover{
color:#E95D0F;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
<div class="entire-page">
<!-- ########################################################################## -->
<!-- Menu -->
<!-- ########################################################################## -->
<nav>
<ul>
<div class="container">
<div class="group1">
<li><a class="social-icons" href="#"><span><i class="fa fa-facebook" aria-hidden="true"></i></span> Facebook</a></li>
<li><a class="social-icons" href="#"><span><i class="fa fa-twitter" aria-hidden="true"></i></span> Twitter</a></li>
</div>
<div class="group2">
<li><a class="social-icons" href="#"><span><i class="fa fa-facebook" aria-hidden="true"></i></span> Facebook</a></li>
<li><a class="social-icons" href="#"><span><i class="fa fa-twitter" aria-hidden="true"></i></span> Twitter</a></li>
</div>
</div>
</ul>
</nav>
</div>
</body>
</html>
put them in one div with single font-size style.
Modify your .group3 selector in CSS file, just like following
.group3 {
font-size:30px;
}
Facebook and Twitter icon height are set by design
You can use fa-fw class to fix size and prevent this issue.
For example:
fa fa-fw fa-facebook
This works for Font Awesome 4.7 and 5
More examples:
https://fontawesome.com/v4.7.0/examples/
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/
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>
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;
}