How to add different icon for li list? - html

now how can i add my own img for a UI list (nav bar)?
Im trying to add my own icon/imgs for each ul list
my current code:
<li> <i class="fa fa-car"></i> אזורי חלוקה</li>
<img src="images/United-States-Flag-24.png" alt="US ENG" title="US English" />
<li> <i class="fa fa-envelope-o"></i> צור קשר</li>
<li><i class="fa fa-shopping-cart"></i> חנות</li>

Here is an example from the font awesome page:
http://fortawesome.github.io/Font-Awesome/examples/
first your code above does not include the ul tag, not sure if you forgot it or did not include it
the use of <i> tags is right, but maybe you did not included the font awesome in your header?
try this example and see if you get the icons to appear. I can edit this base on your feedback
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

Related

Insert link in a social media icon [duplicate]

This question already has answers here:
Clickable icon with link
(3 answers)
Closed 4 years ago.
I've made a social media icon list for my webpage but I don't know how to insert a link in them so they take you somewhere when clicking... I've tried using the "a" tag but it's not working:
<div class="leftside">
<ul class="socialmediaicons">
<li><i class="fa
fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
</ul>
</div>
I've only tried on the facebook icon and it doesn't work, what am doing wrong?
Its working now
<div class="leftside">
<ul class="socialmediaicons">
<li><a target="_blank" href="https://www.facebook.com/EnUnChasquido" rel="http://www.facebook.com/">Facebook<i class="fa
fa-facebook"></i></a></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
</ul>
</div>
Simple use like this
<div class="leftside">
<ul class="socialmediaicons">
<a href="https://www.facebook.com/EnUnChasquido"><li><i class="fa
fa-facebook"></i></li></a>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
</ul>
</div>
Wrap the entire i tag within the anchor tag
Jsfiddle link: https://jsfiddle.net/VrtuosArs/14x0rbtb/
Hope the following code snippet solves your problem
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="leftside">
<ul class="socialmediaicons">
<li><a href="https://www.facebook.com/EnUnChasquido" target="_blank"><i class="fa
fa-facebook"></i></a></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><a href="https://www.youtube.com" target="_blank"><i class="fa fa-youtube"></i></li>
</ul>
</div>
The anchor element tag is the letter “a” surrounded by angle brackets like this: . Both the opening and closing attributes are required, and all of the content between the tags makes up the anchor source. If we want to use just a single word as an anchor, we wrap just that one word in anchor tags. we can use text, image, icons as content

Minimize html links when does not fit in screen

I have web page with multiple hyperlinks. These hyperlinks are loaded from database so can be many of them (multiple pages). My problem - i need to keep top green ribbon in same height. But currently if all elements not fit to screen they line up and that makes my green ribbon quite big.
Code: HTML
`
<body>
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="?action=?home">
<i class="fa fa-home fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x home-text">Home</strong></a></li><li><i class="fa fa-pencil-square-o fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Click 1</strong></li><li><i class="fa fa-truck fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Click 2</strong></li><li><i class="fa fa-sign-language fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Click 3</strong></li>
<li>
<i class="fa fa-sign-out fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x sign-out-text">Sign Out</strong></li>
</ul>
<a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
</body>
`
Would it be possible to create something like little triangle and move those links (just overflowed) in? Or any ideas how to keep those in one line (but not with scroll)?

How to get proper alignment for font awesome icons with Bootstrap Nav bar links?

Live example http://jsbin.com/wupume/1/edit
HTML
<ul class="fa-ul nav nav-sidebar">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
</ul>
According to this font-awesome example page we can use icons with unordered list but when I try to use with anchor links <a href=#"> and .nav class too icon placement is not proper.
I want to know if there is any way to have proper alignment without writing custom css.
Here's what I came up with. It seems that fa-ul and nav nav-whatever do not cooperate. I removed the fa-ul from the <ul> tag and added in nav nav-pills nav-stacked to make a vertical list. Then, I also removed fa-li from the <a> tags and everything seems to align properly:
<div class="container">
<ul class="nav nav-pills nav-stacked">
<li><i class="fa fa-check-square"></i> List icons</li>
<li><i class="fa fa-check-square"></i> List icons</li>
<li><i class="fa fa-check-square"></i> List icons</li>
<li><i class="fa fa-check-square"></i> List icons</li>
</ul>
</div>
And the Bootply:
Bootply - Nav with FA Icons
Hope that helps!
A simpler solution would have been to use the fixed width class fa-fw instead of fa-ul and fa-li.
So the HTML markup would become:
<ul class="nav nav-sidebar">
<li><i class="fa-fw fa fa-check-square"></i>List icons</li>
<li><i class="fa-fw fa fa-check-square"></i>List icons</li>
<li><i class="fa-fw fa fa-check-square"></i>List icons</li>
<li><i class="fa-fw fa fa-check-square"></i>List icons</li>
</ul>
Live example: jsbin
Remove Nav
<ul class="fa-ul nav-sidebar">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
</ul>

can someone tell me the meaning of #id:checked~section{} in css3

I am trying to create animated menu from the reference of 'codepen' but i don't understand the code written below can someone help me, its the first time i saw the code like this, its looks like selector but cant help it to understand
HTML :
<div id="wrapper">
<div class="mobile">
<!-- Checkbox to tonggle the menu -->
<input type="checkbox" id="tm"/>
<ul class="sidenav">
<li><i class="fa fa-apple"></i></li>
<li><i class="fa fa-windows"></i></li>
<li><i class="fa fa-android"></i></li>
<li><i class="fa fa-dribbble"></i></li>
<li><i class="fa fa-tumblr"></i></li>
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-youtube-play"></i></li>
<li><i class="fa fa-dropbox"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-vimeo"></i></li>
<li><i class="fa fa-skype"></i></li>
</ul>
<!-- Content area -->
<section>
<!-- Label for #tm checkbox -->
<label for="tm">Menu</label>
</section>
#ID:checked~section{
}
It means inside particular ID, if the check box is checked then its section(sibling) must have following properties
tilde(~) is a general sibling combinator
For more Information Check this link

Aligning inline blocks at top

I have these three checklist areas that I would like to align together at the top. However, they seem to align at the bottom. Can anyone help with this. My code is on a JSFIDDLE.
http://jsfiddle.net/rynslmns/7H5MA/
HTML
<div id="list1">
<h7>Basic Qualifications</h7>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>21 years of Age</li>
<li><i class="fa-li fa fa-check"></i>20/20 Vision with or without corrective lenses</li>
<li><i class="fa-li fa fa-check"></i>Able to lift 50 lbs</li>
<li><i class="fa-li fa fa-check"></i>Has a friendly face</li>
</ul>
</div>
<div id="list2">
<h7>Background Check</h7>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>No violent crimes</li>
<li><i class="fa-li fa fa-check"></i>No sexual offenses</li>
<li><i class="fa-li fa fa-check"></i>No theft</li>
<li><i class="fa-li fa fa-check"></i>No felonies</li>
</ul>
</div>
<div id="list3">
<h7>Motor Vehicle</h7>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>21 with Valid US driver’s license for 1 or more years</li>
<li><i class="fa-li fa fa-check"></i>Valid personal Auto Insurance that meets or exceeds state requirement</li>
<li><i class="fa-li fa fa-check"></i>Not more than 2 minor Moving violations in past 3 years (minor accident, failure to stop at stop sign)</li>
<li><i class="fa-li fa fa-check"></i>No major moving violations</li>
<li><i class="fa-li fa fa-check"></i>No DUI or other drug-related driving violations</li>
<li><i class="fa-li fa fa-check"></i>No Felonies or other drastic infractions in driver’s lifetime driving history</li>
<li><i class="fa-li fa fa-check"></i>All other Reckless driving habits as buddyTruk sees fit</li>
</ul>
</div>
CSS
#list1 {
display:inline-block;
width:33%;
background-color:red;
}
#list2 {
display:inline-block;
width:33%;
background-color:red;
}
#list3 {
display:inline-block;
width:33%;
background-color:red;
}
You would use vertical-align:top on each element.
This works because they are inline elements with a default vertical-align value of baseline.
EXAMPLE HERE
#list1, #list2, #list3 {
vertical-align:top;
}
add the style vertical-align:top; to each of the list elements