Menu
The question pretty much explains it but I have list items I want to put a simple diamond icon before them but when I try to use ::before it ends up putting the image above instead of the same line and I can't really seem to find out how to put it right before the list icon on the same line.
Like i said the image is just a small diamond, its 5px by 5px
.list-menu::before {
content: url('../images/menu-icons/image-before.png');
}<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu"><a href="#">Home</a></li>
</ul>
</nav>
</div>
303
The CSS3 pseudo-element ::before will place the icon before the link text. In this example, the ID selector for the menu's home link is #menu-link-1 which you can see by right-clicking the link and choosing Inspect in the browser menu. You can also use the ::after pseudo-element to place an icon after the link text.
You just have to add the following CSS to your after or before element: font: normal normal normal 14px/1 FontAwesome; content: '\f042'; Here the content is the icon you want to add. Just copy the Unicode of the icon from the FA website and paste it in the content with a \ prefix.
::before (:before) In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
To insert an icon, add the name of the icon class to any inline HTML element. The <i> and <span> elements are widely used to add icons. All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)
There's no need to use the ::before pseudo-element here at all. You can just use a background image:
.list-menu {
background-image: url('http://placehold.it/16x16');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust according to image size to push text across. */
}<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu"><a href="#">Home</a></li>
</ul>
</nav>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
