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>
Related
I have a vertical side-bar containing icons using a column in flexbox. My goal is when an icon is hovered the icon is replaced by text, Example A house icon when hovered says Home. The problem i am having is when The text appears all the icons not being hovered move to the left. I would like for them to remain centered. Thank you for the help!
MY HTML.
<ul class="main-links">
<li><i class="fas fa-home"></i><b>Home</b></li>
<li><i class="fas fa-user"></i></li>
<li><i class="fas fa-book"></i></li>
<li><i class="fas fa-tools"></i></li>
<li><i class="fas fa-envelope"></i></li>
</ul>
My CSS.
.main-links li i{
color: white;
font-size: 20px;
padding-bottom: 40px;
background: #181818;
width: 22.5px;
height: 21px;
}
.main-links li :hover i{
display: none;
}
.main-links li b{
display: none;
}
.main-links li :hover b{
display: block;
}
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/
I am putting together a “contact” section on my website and am running into difficulty formatting the information. What I’d like is a vertical list of icons with text vertically aligned next to it.
For a single line, this means the line of text should be aligned with the horizontal axis of the icon.
For multiple lines, the first line of text should be aligned with the horizontal axis of the icon, and subsequent lines should be left-justified with the first line of text, not the icon. I can’t figure out how to get that effect though.
This is what I have so far:
ul {
list-style: none;
}
p {
display: inline;
}
a {
font-size: 28px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul>
<li><a><i class="fa fa-5x fa-envelope"></i><p>Multi-line Address Line 1<br>Line 2</p></a></li>
<li><a><i class="fa fa-5x fa-at"></i><p><b>email</b> at <b>yahoo</b> dot <b>com</b></p></a></li>
<li><i class="fa fa-5x fa-linkedin"></i><p>LinkedIn</p></li>
<li><i class="fa fa-5x fa-github"></i><p>GitHub</p></li>
</ul>
Here’s a JSFiddle of my code. I’ve been using an unordered list with the <li> style attribute disabled.
How can I change my CSS to achieve my described layout?
I've adapted the code from your JSFiddle to meet your requirements.
The .fa and p elements are now inline-block with a vertical-align of middle.
Additionally, I added the fa-fw (Font Awesome fixed width) class to your icons, as explained here.
Example below:
ul {
list-style: none;
}
.fa,
p {
display: inline-block;
vertical-align: middle;
}
a {
font-size: 28px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul>
<li><a><i class="fa fa-fw fa-5x fa-envelope"></i><p>Multi-line Address Line 1<br>Line 2</p></a></li>
<li><a><i class="fa fa-fw fa-5x fa-at"></i><p><b>email</b> at <b>yahoo</b> dot <b>com</b></p></a></li>
<li><i class="fa fa-fw fa-5x fa-linkedin"></i><p>LinkedIn</p></li>
<li><i class="fa fa-fw fa-5x fa-github"></i><p>GitHub</p></li>
</ul>
Looks like I was beaten to the punch. Much the same, except I removed the i and placed them :before the li. I just prefer things to be in CSS for replicating in other areas of the site if needed.
ul {
list-style: none;
}
li {
font-size: 28px;
display: inline-block;
}
li.address:before {
font-family: fontawesome;
content: '\f0e0';
margin-right: 10px;
display: inline-block;
}
li.email:before {
font-family: fontawesome;
content: '\f1fa';
margin-right: 10px;
}
a {
display: inline-block;
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ul>
<li class="address"><a>Multi-line Address Line 1<br>Line 2</a>
</li>
<li class="email"><b>email</b> at <b>yahoo</b> dot <b>com</b></li>
</ul>
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>
A picture paints a thousand words. The text on the next line needs to align on same margin as above.
HTML:
<ul>
<li>
<p><em class="fa fa-square"></em><span>Name and surnafdddddddddddddds sdgfh dh hdfh df hdsh dfh dsfh sdfhdsfh sdf hsdfhdsfhme</span></p>
</li>
</ul>
CSS:
ul{
display: table;
a{
padding-left: 10px;
}
span{
padding-left: 10px;
}
}
Update:
After #panther update:
It is acceptable, however the fontawesome icon is now off centre.
You can try to use font awesome's built-in solution for lists:
Use fa-ul and fa-li to easily replace default bullets in unordered lists.
In your case, the code will change to something like this:
<ul class="fa-ul">
<li><i class="fa fa-square"></i><span>Name and surnafdddddddddddddds sdgfh dh hdfh df hdsh dfh dsfh sdfhdsfh sdf hsdfhdsfhme</li>
</ul>
You are probably looking for st. like this.
em {float: left;}
a, span {margin: 0 0 0 20px; display: block;}
Why not do these:
Apply position with a property value of relative to li to avoid overlap
Insert the square with :before selector and add position with a property value of Absolute o its block of CSS.
That way you can position it as needed. You have top, bottom, left, and right properties to work with as you position it.
HTML
<ul>
<li>
<p>Some important text are to be place here.
It may or may not longer than the text we have here. You never know.
</p>
</li>
</ul>
CSS
ul{
list-style-type: none;
}
li {
position: relative; /* Will help curtail overlap */
padding-left: 20px; /* Reserves a space for the square dot */
}
li:before {
content: '\f0c8';
position: absolute;
left: 0; /* Places the square dot at the space created by the LI padding */
font-family: fontAwesome;
}
See working example here
i think you are expecting like this
Fiddle
http://jsfiddle.net/myYUh/88/
I have added some example found on jsfiddle, i work around little bit. it might help you.
CSS
.icons-ul{
width:100px;
}
.icons-ul>li {
position: relative;
}
icons-ul {
margin-left: 2.142857142857143em;
list-style-type: none;
}
ul, ol {
margin-top: 0;
margin-bottom: 10px;
}
.icons-ul .icon-li {
position: absolute;
left: -2.142857142857143em;
width: 2.142857142857143em;
text-align: center;
line-height: inherit;
}
[class^="icon-"], [class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
HTML
<ul class="icons-ul">
<li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
<li><i class="icon-li icon-ok"></i>Buttons</li>
<li><i class="icon-li icon-ok"></i>Button groups</li>
<li><i class="icon-li icon-ok"></i>Navigation</li>
<li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
<li><i class="icon-li icon-ok"></i>…and many more with custom CSS</li>
</ul>
Late replay but check how I solved it.
ul li{ display: flex; padding: 10px 0; }
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<ul>
<li>
<i class="fa-solid fa-check"></i>
Font Awesome is the internet's icon library and toolkit used by millions of
designers, developers, and content creators.
</li>
<li>
<i class="fa-solid fa-check"></i>
Font Awesome is the internet's icon library and toolkit used by millions of
designers, developers, and content creators. Font Awesome is the internet's
icon library and toolkit used by millions of designers, developers, and
content creators.
</li>
<li>
<i class="fa-solid fa-check"></i>
Font Awesome is the internet's icon library and toolkit
</li>
<li>
<i class="fa-solid fa-check"></i>
Font Awesome is the internet's icon library and toolkit used by millions of
designers, developers, and content creators.
</li>
</ul>