Here is my page screenshot http://s30.postimg.org/44jynnz35/Untitled_2.png
html:
<div id="social-bar">
<a href="https://www.facebook.com/pages/Open-Source-Hacker/181710458567630">
<i class="icon icon-facebook"></i>
<span>Facebook</span>
</a>
<a href="https://twitter.com/moo9000">
<i class="icon icon-twitter"></i>
<span>Twitter</span>
</a>
<a href="https://plus.google.com/103323677227728078543/">
<i class="icon icon-google-plus"></i>
<span>Google Plus</span>
</a>
<a href="http://opensourcehacker.com/">
<i class="icon icon-rss"></i>
<span>Blog</span>
</a>
</div>
I have been created social links with social icons, I took source code from this link https://github.com/miohtama/FontAwesome-and-Bootstrap-social-icons-example/
I need one more link and icon, that is mailbox.
So i added code like this,
<a href="http://opensourcehacker.com/">
<i class="icon icon-gmail"></i>
<span>Email</span>
</a>
But i m not sure for mail box icon code,
I have 3 files,
1. <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
2. <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" />
3. <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
So may i know, exact code for mailbox icon or where can i take?
Any help would be highly appreciated.
Thanks in advance.
It's icon-envelope
<i class="icon icon-envelope"></i><span>Email</span>
Since you are using older version of fontawesome, some icons may be missing from the file. Try using this updated library : http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css instead of older one.
Related
I am editing a WordPress widget's HTML.
I copied directly from the original code adding social media links and 1 additional social media section, copied from the first section, and changed only the names and links.
Whenever I checked it I get the following errors:
End of file seen and there were open elements
Unclosed element
See enclosed image.
HTML Errors
Here is the code ( WordPress widget HTML do not require; Doctype, title, header, etc ):
<div class="ce-team">
<figure>
<img src="https://ourfightingspirit.com/wp-content/uploads/2022/03/anthony-headshot-small.png" alt="team">
</figure>
<h3>
Anthony Gigante
</h3>
<h6 class="team-position">host</h6>
<p>
The stories you will hear are people like you and me who have overcome incredible obstacles, succeeded, and at the same time inspiring others.
</p>
<div class="team-socials">
<i class="cl-icon-facebook"></i><i class="cl-icon-instagram"></i>
<i class="cl-icon-instagram"></i><i class="cl-icon-youtube"></i>
<a href="https://www.youtube.com/channel/UCps0blZJBsefbHfxXRpTgvQ">
<i class="cl-icon-you-tube"></i></a>
</div>
I'm sure I'm missing something obvious. Your help is greatly appreciated.
Thank you!
Paula
The problem is that the first DIV is missing closing, Putting the closing DIV tag at the end of the code should fix the problem.
<div class="ce-team">
<figure>
<img
src="https://ourfightingspirit.com/wp-content/uploads/2022/03/anthony-headshot-small.png"
alt="team"
/>
</figure>
<h3>Anthony Gigante</h3>
<h6 class="team-position">host</h6>
<p>
The stories you will hear are people like you and me who have overcome
incredible obstacles, succeeded, and at the same time inspiring others.
</p>
<div class="team-socials">
<a href=" https://ourfightingspirit.com/staff/anthony-gigante">
<i class="cl-icon-facebook"></i
></a>
<a href="Facebook—https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="Instagram—https://www.instagram.com/ourfightingsprit/">
<i class="cl-icon-youtube"></i
></a>
<a href="https://www.youtube.com/channel/UCps0blZJBsefbHfxXRpTgvQ">
<i class="cl-icon-you-tube"></i
></a>
</div>
</div>
But closing the DIV is a bit confusing, as there are two possibilities to close the div tag. If the first option doesn't work well, try the following code. This closes the DIV before the second DIV
<div class="ce-team">
<figure>
<img
src="https://ourfightingspirit.com/wp-content/uploads/2022/03/anthony-headshot-small.png"
alt="team"
/>
</figure>
<h3>Anthony Gigante</h3>
<h6 class="team-position">host</h6>
<p>
The stories you will hear are people like you and me who have overcome
incredible obstacles, succeeded, and at the same time inspiring others.
</p>
</div>
<div class="team-socials">
<a href=" https://ourfightingspirit.com/staff/anthony-gigante">
<i class="cl-icon-facebook"></i
></a>
<a href="Facebook—https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="Instagram—https://www.instagram.com/ourfightingsprit/">
<i class="cl-icon-youtube"></i
></a>
<a href="https://www.youtube.com/channel/UCps0blZJBsefbHfxXRpTgvQ">
<i class="cl-icon-you-tube"></i
></a>
</div>
Hi I have some code for a icon bar below:
<body onload=startTime()>
<div id=txt></div>
<meta content="width=device-width,initial-scale=1"name=viewport>
<link href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet>
<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 .3s ease;color:#fff;font-size:36px}.icon-bar a:hover{background-color:#000}.active{background-color:#4caf50!important}</style>
<body>
<div class=icon-bar>
</i>
</i>
</i>
</i>
</i>
</div>
It looks like this:
I want some text below the icons to show my visitors what the icon means. I tried doing some text after the fa fa-***** but it keeps some text on the side. I went onto w3schools but they didn't have any text examples. I'm not sure if this is possible because this is a icon bar, not a text bar but maybe there is a way. If you know a way can you please reply.
Thanks!
try this :
<body onload="startTime()">
<div id="txt"></div>
<meta content="width=device-width,initial-scale=1" name="viewport" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<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 .3s ease;color:#fff;font-size:36px}.icon-bar a:hover{background-color:#000}.active{background-color:#4caf50!important}</style>
<div class="icon-bar">
<a href="Subpages/PC/pc.html">
<i class="fa fa-desktop"><p style="font-size:20px;">text1</p></i>
</a>
<a href="Subpages/Laptops/laptops.html">
<i class="fa fa-laptop"><p style="font-size:20px;">text2</p></i>
</a>
<a href="Subpages/Software/software.html">
<i class="fa fa-windows"><p style="font-size:20px;">text3</p></i>
</a>
<a href="Subpages/CoolStuff/coolstuff.html">
<i class="fa fa-smile-o"><p style="font-size:20px;">text4</p></i>
</a>
<a href="Subpages/About/About.html">
<i class="fa fa-question-circle-o"><p style="font-size:20px;">text5</p></i>
</a>
</div>
</body>
You can use span tag to add text
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 .3s ease;color:#fff;font-size:36px; text-decoration: none; font-size: 16px;}.icon-bar a:hover{background-color:#000}.active{background-color:#4caf50!important}
.icon-bar a span {
display: block;
margin-top: 5px;
}
<body onload=startTime()>
<div id=txt></div>
<meta content="width=device-width,initial-scale=1"name=viewport>
<link href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet>
<div class=icon-bar>
</i><span>link</span>
</i><span>link</span>
</i><span>link</span>
</i><span>link</span>
</i><span>link</span>
</div>
working fiddle here
Recently I ran into a weird bug where characters get shuffled/mixed when the page is loaded, not everytime but once every few loads you will see it. Kindof like a fouc except it only goes away on reload. I was wondering if someone has ever seen something like this before and can explain to me why this happens and how to solve it or prevent it from happening. For so far I couldn't reproduce this error in any browser but the original samsung browser.
The first word in the image should be ' contact', second one 'inschrijven'.
HTML:
<div class="cta-widget">
<a class="cta-link" href="#">
<i class="fa fa-phone"></i>
<p>Contact</p>
</a>
</div>
<div class="cta-widget">
<a class="cta-link" href="#">
<i class="fa fa-pencil-square-o"></i>
<p>Inschrijven</p>
</a>
</div>
<div class="cta-widget">
<a class="cta-link" href="#">
<i class="fa fa-user"></i>
<p>Team</p>
</a>
</div>
The only css used for just the text is
.c2aArea .cta-link p {
line-height: 1.2em;
margin-bottom: 0;
}
Been wondering for a few minutes why Font awesome icons did not appear into my application, but after writing this ultra-simple fiddle, I see that they don't appear at all even with so little code.
I am just loading the CDN and inserting an icon like this:
<!-- Font awesome stylesheet -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-camera-retro fa-5x">This is a camera</i>
<i class="fa fa-icon-remove fa-2x" style="color: red;">This is an X</i>
What am I missing?
Try this:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-camera-retro fa-5x">This is a camera</i>
<i class="fa fa-remove fa-2x" style="color: red;">This is an X</i>
Here the fiddle
A couple of errors.
No fontAwesome Lib
Mistyped icon class
Solution:
Add the link below to the space provided for external resource on fiddle
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
Then change
<i class="fa fa-icon-remove fa-2x" style="color: red;">This is an X</i>
To
<i class="fa fa-remove fa-2x" style="color: red;">This is an X</i>
Note: You don't need the word icon between fa and remove.
See it working here
If using jsfiddle you have to add the following link under external resources:
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
Or use this in your head section:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Your jsfiddle updated.
I have added html code inside php, which works fine. Just issue is, font awsome symbol does not appear(display square box), which I used successfully before.
<link href="font-awesome.min.css" rel="stylesheet">
<link href="bootstrap.css" rel="stylesheet">
echo '<div class="c1">
<div class="item2">
<div class="image2">
<img class="media-object" src='.$row1[image].'>
</div>
<div class="descriptionContainer2">
<span class="main-head">Italian - '.$row1[rate].' <span class="fa fa-star"> </span> </span>
<span class="min-head"> '.$review.'</span>
<span class="subcont">
<span class="fa fa-phone"> '.$row1[phone].'</span>
<span class="fa fa-home">'.$row1[address].'</span>
</span>
</div>
</div>
</div>';
When I used same code in fiddle it displays correctly:
CHECK FIDDLE - http://jsfiddle.net/karimkhan/9r74Y/4/
Use the CDN:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
if they display with that in place then you know you have a path issue.
Cheers,
Ant.