I've attempted to replace fa icons on blogger with custom icons using
.fa-facebook{content:url("")}
The images work on Chrome but not FF or IE.
What's going on/Is there a workaround?
Jsfiddle
According to W3school:
Definition and Usage
The content property is used with the :before and :after
pseudo-elements, to insert generated content.
So instead of .fa-facebook{content:url("")} use .fa-facebook:before{content:url("")}
Jsfiddle
According to the official rules, the content property only works for ::before and ::after pseudo-elements. So in this case, Chrome breaks the rules!
Solution: add ::before to the selectors for the icons, then it will work in all browsers.
.fa-facebook::before {
content: url("https://lh3.googleusercontent.com/-VPr8buUo47w/VjMsRPIzr-I/AAAAAAAAAL4/AYBtvlNCQiw/s64-Ic42/clouds_social_media_icons_set_64x64_0000_facebook.png");
}
.fa-twitter::before {
content: url("https://lh3.googleusercontent.com/-yDH1FuHcQ5s/VjMsQ2lXvxI/AAAAAAAAAMg/i8JHsTh6aU8/s64-Ic42/clouds_social_media_icons_set_64x64_0002_twitter.png");
}
.fa-instagram::before {
content: url("https://lh3.googleusercontent.com/-VIveL13ocQc/VjMw7JU6dGI/AAAAAAAAAOo/AGxBey6rtC0/s64-Ic42/clouds_social_media_icons_set_64x64_0001_instagram.png")
}
.fa-pinterest::before {
content: url("https://lh3.googleusercontent.com/-Or5qfrW2PFI/VjMsQziUH5I/AAAAAAAAAL8/bOIkRNtMSbo/s64-Ic42/clouds_social_media_icons_set_64x64_0001_pinterest.png");
}
.fa-google-plus::before {
content: url("https://lh3.googleusercontent.com/-xIroPQ5PdBk/VjMsRhd-1VI/AAAAAAAAAMM/rcruNIarpPU/s64-Ic42/clouds_social_media_icons_set_64x64_0003_google%25252B.png");
}
.fa-heart::before {
content: url("https://lh3.googleusercontent.com/-ymc-N9bHkpo/VjNAMkaZnpI/AAAAAAAAAPY/Yv1qLXXuG7E/s64-Ic42/clouds_social_media_icons_set_64x64_0001_bloglovin.png");
}
<ul class="site-social-networks secondary-2-primary style-default show-title">
<li><i class="fa fa-facebook"></i>Facebook
</li>
<li><i class="fa fa-twitter"></i>Twitter
</li>
<li><i class="fa fa-instagram"></i>Instagram
</li>
<li><i class="fa fa-pinterest"></i>Pinterest
</li>
<li><i class="fa fa-heart"></i>Bloglovin
</li>
<li><i class="fa fa-google-plus"></i>Google Plus
</li>
</ul>
Use image in background instead of content for e.g
.fa-facebook{
content: '';
background:url("https://lh3.googleusercontent.com/-VPr8buUo47w/VjMsRPIzr-I/AAAAAAAAAL4/AYBtvlNCQiw/s64-Ic42/clouds_social_media_icons_set_64x64_0000_facebook.png");
width:64px;
height:64px;
display:inline-block;
}
I want to replace this line and show a custom image.
<i class="fa-solid fa-graduation-cap fa-lg">
Related
My code is given below,
<ul style="list-style:none">
<li><i class="fa fa-hospital-o first" aria-hidden="true"></i>arrows</li>
<li><i class="fa fa-cogs" aria-hidden="true"></i>battery</li>
<li><i class="fa fa-university" aria-hidden="true"></i>bell</li>
<li><i class="fa fa-industry" aria-hidden="true"></i>bicycle</li>
<li><i class="fa fa-music" aria-hidden="true"></i>circle</li>
<li><i class="fa fa-users" aria-hidden="true"></i>deaf</li>
</ul>
So, onclick of a link I need to change the color of content & icon in the link.
css:
ul li:active {
color:green;
}
It is not working. When selecting a particular list item, I need to change the color. Can anyone please help me with this?
Check this solution hope it will help :
$(document).ready(function(){
$("ul > li").click(function(){
$("ul > li").removeClass("active");
$(this).addClass("active");
});
});
ul{
list-style:none;
}
ul li {
position: relative;
}
li a {
text-decoration: none;
}
li a i {
position: absolute;
left: 0px;
}
li a {
padding-left: 32px;
}
li.active a {
color: green !important;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active"><i class="fas fa-hospital first" aria-hidden="true"></i>arrows</li>
<li><i class="fas fa-cogs" aria-hidden="true"></i>battery</li>
<li><i class="fas fa-university" aria-hidden="true"></i>bell</li>
<li><i class="fas fa-industry" aria-hidden="true"></i>bicycle</li>
<li><i class="fas fa-music" aria-hidden="true"></i>circle</li>
<li><i class="fas fa-users" aria-hidden="true"></i>deaf</li>
</ul>
You got i as item ? thats weird but w/e i also dont get what you want a list but w/e
<ul>
<li><a class="something" href="#">arrows</a></li>
</ul>
.something:active {
background-color: white;
}
again i dont get the question, or what your asking it seems your marking way to much on html, you need to clean your code
I'm trying to rotate an arrow 90 degrees when I hover over a menu item on my navbar.
The navbar menu when hovered over currently displays a list of sub menus, but I'd like for the arrow to rotate facing down when the submenu is displayed. Submenu hover works as I'd like to right now, but I can only get the arrow to rotate if I hover directly over it. I would like tie the arrow rotation and the submenu display together.
Here's my HTML:
<li>
<a>
<i class="fa fa-columns" aria-hidden="true"></i>
Admin
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</a>
<ul>
<li><i class="fa fa-globe" aria-hidden="true"></i> Source Admin</li>
<li><i class="fa fa-inbox" aria-hidden="true"></i> Service Admin</li>
<li><i class="fa fa-clipboard" aria-hidden="true"></i> Bulk Services</li>
</ul>
</li>
Here is my CSS:
nav li:hover > ul
{
display: block;
}
nav i:hover
{
transform: rotate(90deg);
}
I should also note, that the way I have it right now rotates every other menu icon at the moment.
Any help is appreciated, thank you!
I am building a responsive website using Bootstrap and Less.
I have put in some social Icons using font awesome which have worked fine.
However, my logo in meant to be in the center and was before I put the social icons in but now I have added them they are pushing my logo to the left.
Here is the html
<header>
<div id="social">
<ul class="pull-right">
<li><i class="fa fa-facebook-official fa-2x"></i></li>
<li><i class="fa fa-twitter fa-2x"></i></li>
<li><i class="fa fa-linkedin-square fa-2x"></i></li>
<li><i class="fa fa-google-plus-square fa-2x"></i></li>
</ul>
</div>
<div class = "logomove">
<div id="logo" class="text-center">
<img src="assets/images/logo.png" alt="Logo" />
</div>
</div>
</header>
And the CSS:
#social {
li {list-style: none; display: inline-block; padding:3px; float:right; color:#brand-primary; }
}
I have also tried positioning the logo 250px across the page to try and center it but it will not work.
Any suggestions much appreciated, I'm really new to this so sorry if I am missing something.
The static positioning of your #social element is pushing the logo away. You have to make either of them absolute to make it not effect the other element.
Try like this:
header{
position:relative;
}
#social {
li {
list-style: none;
display: inline-block;
padding:3px;
float:right;
color:#brand-primary;
position:absolute;
right:0px;
top:0px;
}
}
You might need to adjust the top and right values.
I'm currently working on an unordered list containing list items with taglines. I'm having a problem concerning one list item, which is long enough to take up two lines (See image)
I want it so that the second line is aligned with the first line. This is the HTML code i'm using. I used fontAwesome for the check images.
ul {
width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>
I already tried to enter multiple in between '2' and 'lines' but that seems like a really bad practice to me. I hope someone can help me with this problem.
This is because the tick is inline content so when the text wraps it will continue to flow as usual.
You can stop this behaviour by taking advantage of text-indent:
The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.
text-indent (https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)
By supplying a negative text-indent you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left you can cancel this offset out.
In the following example a value of 1.28571429em is used because it is the width set on the .fa-fw by font-awesome.
ul {
width: 300px;
}
li {
padding-left: 1.28571429em;
text-indent: -1.28571429em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>
you can just add this to your ul:
ul {
text-indent:-20px;
margin-left:20px;
}
JSFIDDLE
You could remove the check out of the page flow by setting them with position:absolute
ul {
width: 300px;
}
.fa-fw {
position: absolute;
left: -22px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="fa-ul custom-list">
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>
You can use "display:table" as style for li, and inside create a span with "display:table-cell" styling. Or create corresponding class. Like this:
<li style="display:table"><span style="display:table-cell">text with
all lines indented</span></li>
you can put your text in a div and give float:left to your inner li and div.
ul li{
padding: 10px 0 10px 20px;
text-indent: -1em;
}
add padding and text indent - that moves the text from the li:before.
You can use list-style-position:outside. Do your CSS like this:
ul li {
list-style-position:outside;
... whatever else ...
}
or directly inline:
<li style = 'list-style-position:outside'>stuff </li>
ul li {
display: flex;
flex-direction: row;
}
ul li:before {
font: normal normal normal 14px/1 FontAwesome;
content: "\f054";
margin-right: 7px;
display: flex;
align-items: flex-start;
margin-top: 2px;
}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<ul><li>Visit the Museum of Modern Art in Manhattan</li>
<li>Visit to Bali with tripraja</li>
<li>Check out Campbell's Soup Cans by Warhol and The Dance (I) by Matisse</li>
<li>Behold masterpieces by Gauguin, Dali, Picasso, and Pollock</li>
<li>Enjoy free audio guides available in English, French, German, Italian, Spanish, Portuguese.</li></ul>
I want to stack the two Font Awesome icons fa-star and fa-star-half, but I am having alignment issues. See image below:
Here is my HTML:
<span class="fa-stack">
<i class="fa fa-fw fa-lg fa-star-half fa-stack-1x"></i>
<i class="fa fa-fw fa-lg fa-star fa-stack-1x"></i>
</span>
...and my CSS:
a-stack i.fa-star {
color:transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
}
.fa-stack i.fa-star-half {
color:yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
}
Note that I do not want to use fa-star-half-o which has an unappealing design when used with an outline.
I have tried to use "float," but without success. If I use "margin-left," the spacing is off. See image below:
Any help is appreciated. Thanks!
Jesse
Use the following margin-left to line up the image. Check it out here: https://jsfiddle.net/f63h157x/1/
.fa-stack i.fa-star-half {
color:yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
margin-left: -5px;
}
I think all you need to do is apply a text-align: left; to both of the <i /> elements and it should align properly without needing to use margin-left: 5px;
One viable solution is to use fa-star-half-o instead of fa-star-half.
<span class="fa-stack">
<i class="fa fa-fw fa-lg fa-star-half-o fa-stack-1x"></i>
<i class="fa fa-fw fa-lg fa-star fa-stack-1x"></i>
</span>
This way the width of the half-star is the same as the width of full stars, and your icons will stack up. No custom margins required.