This question already has answers here:
How to keep indent for second line in ordered lists via CSS?
(14 answers)
Closed last month.
Having the following code snippet, when the window is made smaller, the width is smaller, the text is breaking into multiple lines.
The problem is that it shouldn't get under the icons, it should start from the same position as the above text.
.my-style {
padding: 0;
list-style-type: none;
display: table;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
<ul class="my-style">
<li><i class="far fa-check hacker-green tickbox"></i> This is a very very long text that breaks into multiple lines sometimes</li>
<li><i class="far fa-check hacker-green tickbox"></i> This should do the same thing as the above text of course</li>
<li><i class="far fa-check hacker-green tickbox"></i> Argentina is the current world champion at footbal thanks to Messi</li>
<li><i class="far fa-check hacker-green tickbox"></i> What else should we say about this great accomplishment? Nothing more is needed</li>
</ul>
</div>
It seems that display: table or display: table-cell doesn't work
If I understand it correctly, you want to create a list with custom icon. To do that, you can apply list-style:none on the ul, to remove the default list bullet, and using ::before on li, you can create 'icon-like' effect. Note that you might need to play a bit with the padding and margin, it depends how big icon are you going to use.
.my-style {
padding: 0;
list-style: none;
}
.my-style li {
padding-left: 10px
}
.my-style li::before {
content: '\f00c';
display: inline-block;
margin-left: -15px;
}
<ul class="my-style">
<li>This is a very very long text that breaks into multiple lines sometimes</li>
<li>This should do the same thing as the above text of course</li>
<li>Argentina is the current world champion at footbal thanks to Messi</li>
<li>What else should we say about this great accomplishment? Nothing more is needed</li>
</ul>
Also, note that you need to use Fontawesome icon unicode within the ::before
I am using a bulma-based template for a static site generator and I'm looking to remove any dependencies on Javascript and any resources hosted by third parties, as well as generally minimizing things.
The template utilizes font awesome for some of the icons involved, but it's really only around 5-10 icons total, so I was planning to inline them as SVGs rather than load an entire web font. However, I'm not sure how to get as close as possible to a drop-in replacement for these few icons through pure CSS.
Here is a minimal working example of the HTML:
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<ul style="list-style: none">
<li>
<a href="https://example.com">
<span style="align-items:center; justify-content:center"><i class="fa fa-globe fa-fw"></i></span>
<span>Example</span>
</a>
</li>
<li style="font-size: 20px">
<a href="https://example.com">
<span style="align-items:center; justify-content:center"><i class="fa fa-globe fa-fw"></i></span>
<span class="link-text">Example</span>
</a>
</li>
<li style="font-size: 40px">
<a href="https://example.com">
<span style="align-items:center; justify-content:center"><i class="fa fa-globe fa-fw"></i></span>
<span class="link-text">Example</span>
</a>
</li>
</ul>
If I use this with the fontawesome CSS (see this JSfiddle) by prepending this:
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
I get an icon that scales with the font size, has the same color as the font size and is centered vertically with respect to the text. If, however, I use an inline SVG (see this JSFiddle), with this CSS:
.fa-globe::before {
content: '';
display: inline-block;
height: 1em;
width: 1em;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMzY0LjIxNSAxOTJoMTMxLjQzYzUuNDM5IDIwLjQxOSA4LjM1NCA0MS44NjggOC4zNTQgNjRzLTIuOTE1IDQzLjU4MS04LjM1NCA2NGgtMTMxLjQzYzUuMTU0LTQzLjA0OSA0LjkzOS04Ni43NDYgMC0xMjh6TTE4NS4yMTQgMzUyYzEwLjY3OCA1My42OCAzMy4xNzMgMTEyLjUxNCA3MC4xMjUgMTUxLjk5Mi4yMjEuMDAxLjQ0LjAwOC42NjEuMDA4cy40NC0uMDA4LjY2MS0uMDA4YzM3LjAxMi0zOS41NDMgNTkuNDY3LTk4LjQxNCA3MC4xMjUtMTUxLjk5MkgxODUuMjE0em0xNzQuMTMtMTkyaDEyNS4zODVDNDUyLjgwMiA4NC4wMjQgMzg0LjEyOCAyNy4zMDUgMzAwLjk1IDEyLjA3NWMzMC4yMzggNDMuMTIgNDguODIxIDk2LjMzMiA1OC4zOTQgMTQ3LjkyNXptLTI3LjM1IDMySDE4MC4wMDZjLTUuMzM5IDQxLjkxNC01LjM0NSA4Ni4wMzcgMCAxMjhoMTUxLjk4OWM1LjMzOS00MS45MTUgNS4zNDUtODYuMDM3LS4wMDEtMTI4ek0xNTIuNjU2IDM1MkgyNy4yNzFjMzEuOTI2IDc1Ljk3NiAxMDAuNiAxMzIuNjk1IDE4My43NzggMTQ3LjkyNS0zMC4yNDYtNDMuMTM2LTQ4LjgyMy05Ni4zNS01OC4zOTMtMTQ3LjkyNXptMjA2LjY4OCAwYy05LjU3NSA1MS42MDUtMjguMTYzIDEwNC44MTQtNTguMzk0IDE0Ny45MjUgODMuMTc4LTE1LjIzIDE1MS44NTItNzEuOTQ5IDE4My43NzgtMTQ3LjkyNUgzNTkuMzQ0em0tMzIuNTU4LTE5MmMtMTAuNjc4LTUzLjY4LTMzLjE3NC0xMTIuNTE0LTcwLjEyNS0xNTEuOTkyLS4yMjEgMC0uNDQtLjAwOC0uNjYxLS4wMDhzLS40NC4wMDgtLjY2MS4wMDhDMjE4LjMyNyA0Ny41NTEgMTk1Ljg3MiAxMDYuNDIyIDE4NS4yMTQgMTYwaDE0MS41NzJ6TTE2LjM1NSAxOTJDMTAuOTE1IDIxMi40MTkgOCAyMzMuODY4IDggMjU2czIuOTE1IDQzLjU4MSA4LjM1NSA2NGgxMzEuNDNjLTQuOTM5LTQxLjI1NC01LjE1NC04NC45NTEgMC0xMjhIMTYuMzU1em0xMzYuMzAxLTMyYzkuNTc1LTUxLjYwMiAyOC4xNjEtMTA0LjgxIDU4LjM5NC0xNDcuOTI1QzEyNy44NzIgMjcuMzA1IDU5LjE5OCA4NC4wMjQgMjcuMjcxIDE2MGgxMjUuMzg1eiIvPjwvc3ZnPg==");
}
The icon is not centered vertically with respect to the text, and it is not the same color as the text. What is the best way to treat inline SVGs as replacements for font awesome glyphs without javascript? (I'm less concerned with the "icons are the wrong color" than the fact that they don't seem to be aligned well with the text, I just mention it because if there is an approach that solves both problems, I'd prefer that).
Perhaps this resource could be useful for you. IcoMoon has a decent selection of free icons, including the social networks, and if you click 'generate svg' you can then select 'get code' and copy/paste the html and css straight into your site.
To change icon color and layout you can simply change the css you just grabbed.
Something like:
`
.icon {
display: flex;
align-items: center;
color: #whatever-text-color;
}
`
Here is a JS-free example that you can play with. If you are using a sass variable for controlling font-size, you could also hook the image up to that to keep everything scaling together.
The only catch with using SVG over using font-awesome is a lack of svg support on old/ancient IE browsers. Everything else is a solid win - less http requests, less file size, less dependencies.
Hope this helps :)
EDIT
extra tip. For animations with inline svg, put a class or id onto the PATH tag and animate that. For rotations you might also need: transform-origin: center; since it defaults to rotating around the top-right.
If you have an svg with multiple paths, you can animate them individually and start getting really funky.
In your fiddle https://jsfiddle.net/ks392fzv/6/, if you set content to content to content: "\00a0\00a0" in the .fa-globe::before class, it will give the i content and that element can now align by the baseline.
.fa-globe::before {
content: '\00a0\00a0';
...
I forked your fiddle and made the small change here: https://jsfiddle.net/ndebellas/y4dLcqkx/.
I downloaded a web site template from this link. How can I change the icon's style in the navigation menu of the index.html page?
<i class="fa fa-home" style="color:black; font-size:48px"></i>Home
This didnt work
So I introduced the style through a new class "fa-home-a"
.fa-home-a {
color:black;
}
and changed my html to this
<i class="fa fa-home fa-home-a"></i>Home
but this didnt work as either
Don't use the modified class use the original class that is fa-home and apply external css which is
.fa-home {
color:black;
font-size:80px;
}
If this does not works then you will have to give the refrence of the parent class
<i class="fa fa-home" style="color:black; font-size:48px"></i>Home
I want to say that the problem is coming from the inline-style reference, there is a missing semi-colon ;
I found the solution.
I added "color" property to following piece of code
#hornav li [class^="fa-"]:before,
#hornav li [class*=" fa-"]:before {
...
color:#ffd602;
}
I've been learning CSS for a few months and I'm trying to build a practice website using bootstrap as well. I've selected a nav-bar and want to code page links that will change color based on which page is currently open. I'm doing this by making a class for each link called "activePage" and coding a CSS selector for that class in my custom styles.css
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="activePage" href="index.html">News</a></li>
<li>Tour Dates</li>
<li>About</li>
<li>Discography</li>
<li>Other Media</li>
</ul>
<div align = "right" class="social">
<ul>
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-github"></i></li>
<li><i class="fa fa-lg fa-instagram"></i></li>
<li><i class="fa fa-lg fa-tumblr"></i></li>
<li><i class="fa fa-lg fa-youtube"></i></li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
As you can see for HTML page I have a class on the nabber for the active page called "activePage"
For now i have
a.activePage {
color:blue;
}
as the CSS rule, but nothing shows up. Here's the odd thing When I hit inspect element to see what CSS rules are being applied to links I get this.
http://imgur.com/85REHsw
It says that a.activePage is the most specific selector, but for some reason the color of the text is being determined by .navbar-inverse .navbar-nav>li>a in bootstrap.css. Why is this happening. If my CSS knowledge is correct (and it may very well not be) those selectors should only effect things directly inside the div, things inside a custom class I created should override those selectors. Why is it not happening?
Btw I've tried moving the CSS selector all throughout the stylesheet, I've tried specifying li.activePage instead. I've tried putting it in bootstrap.css (it's not the stylesheet itself, other rules have been applied correctly) It seems that there is something I'm not understanding here.
Your style sheets should be linked in this order:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/customstyles.css" rel="stylesheet">
Considering Specificity
This is occurring due to CSS Specificify Rules, which govern how styles target certain elements and how decisions are made regarding conflicts should be resolved between them.
The Bootstrap style that is being applied to your element more specifically describes the element it is targeting as you can see by the multiple nesting :
.navbar-inverse .navbar-nav li a {
color: #9d9d9d;
}
This is much more specific than the broad style that you are currently using :
a.activePage {
color: blue;
}
Possible Approaches for Overriding
There are a few ways to ensure that your style properly overrides the existing Bootstrap one :
Ensure that your style is defined after your Bootstrap reference (this is very important if not using the !important option below)
Make your style more specific (e.g. .navbar-inverse .navbar-nav li a.activePage)
Consider using an !important modifier to your style to give your style precedence.
You can work around this quite easily to ensure that you want your style to be applied by using the !important modifier :
/* Example using a more specific style */
.navbar-inverse .navbar-nav li a.activePage {
color: blue;
}
/* Example using the !important modifier */
a.activePage {
color: blue!important;
}
I have to wrap my icon within an <a> tag for some reason.
Is there any possible way to change the color of a font-awesome icon to black?
or is it impossible as long as it wrapped within an <a> tag? Font awesome is supposed to be font not image, right?
<i class="icon-cog"></i> Edit profile
This worked for me:
.icon-cog {
color: black;
}
For versions of Font Awesome above 4.7.0, it looks this:
.fa-cog {
color: black;
}
HTML:
<i class="icon-cog blackiconcolor">
css :
.blackiconcolor {color:black;}
you can also add extra class to the button icon...
You can specify the color in the style attribute:
<i class="icon-cog" style="color:black"></i> Edit profile
Try this:
<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">
To change the font awesome icons color for your entire project use this in your css
.fa {
color : red;
}
If you don't want to alter the CSS file, this is what works for me. In HTML, add style with color:
<i class="fa fa-cog" style="color:#fff;"></i>
Is there any possible way to change the color of a font-awesome icon to
black?
Yes, there is. See the snipped bellow
<!-- Assuming that you don't have, this needs to be in your HTML file (usually the header) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Here is what you need to use -->
Edit Profile
Font awesome is supposed to be font not image, right?
Yes, it is a font. Therefore, you are able to scale it to any size without losing quality.
To hit only cog-icons in that kind of button, you can give the button a class, and set the color for the icon only when inside the button.
HTML:
<a class="my-nice-button" href="/users/edit">
<i class="icon-cog"></i>
Edit profile
</a>
CSS:
.my-nice-button>i { color: black; }
This will make any icon that is a direct descendant of your button black.
With reference to #ClarkeyBoy answer, below code works fine, if using latest version of Font-Awesome icons or if you using fa classes
.fa.icon-white {
color: white;
}
And, then add icon-white to existing class
For me the only thing that worked is inline css + overriding
<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>
just give and text style whatever you want like :D
HTML:
<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
<span style="color:black;">Text Name</span>
</a>
.fa-search{
color:#fff;
}
you write that code in css and it would change the color to white or any color you want, you specify it
You can change the Font Awesome's icon color with the bootstrap class
use
text-color
example
text-white
Sometimes changing the colour in the external css file doesn't work. You can add inline css property in the icon tag and that will work.
For example
<i class="fa-solid fa-keyboard" style="color: grey;"></i>
just give it the style whatever you want like
style="color: white;font-size: 20px;"
You can change the color of a fontawesome icon by changing its foreground color using the css color property. The following are examples:
<i class="fa fa-cog" style="color:white">
This supports svgs also
<style>
.fa-cog{
color:white;
}
</style>
<style>
.parent svg, .parent i{
color:white
}
</style>
<div class="parent">
<i class="fa fa-cog" style="color:white">
</div>
Write this code in the same line, this change the icon color:
<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">
Use color property to change the color of your target element as follow :
.icon-cog { // selector of your element
color: black;
}
Or in the newest version of font-awesome , you can choose among filled or not filled icons
If you want to change the color of a specific icon, you can use something like this:
.fa-stop {
color:red;
}
It might a little bit tricky to change the color of font-awesome icons. The simpler method is to add your own class name inside the font-awesome defined classes like this:
.
And target your custom_defined__class_name in your CSS to change the color to whatever you like.
Open the svg file in vs code or something
change the line
path fill="gray" to what ever color you want! in my case i change it to gray!
I added a style, then color of your choice and make sure to make it bold
HTML:
<i class="icon-cog blackiconcolor">
css :
.blackiconcolor {color:black;}
Using class will give you a free binding property which you can apply on any tag you require.