I would like to replace the background image in my menu with a string that uses a FontAwesome character. It is a ready-made menu, a module in Joomla.
It looks like this:
Here is the CSS:
.responsiveMenuTheme5m.isMobile > li.deeper > span {
background-image: url("../images/downArrow.png") !important;
background-position: right 57px !important;
background-repeat: no-repeat !important;
}
So the menu coder provided an image called downArrow.png. Which is basically a caret-down. I would like to replace this with FontAwesome <span class="fa fa-caret-down"> </span>. I've got a Twitter Bootstrap 3 template and I've got FontAwesome installed, so I thought this should be a possibility, even without tinkering with the menu code, but only with css.
Can anyone help me do it?
Try this
.responsiveMenuTheme5m.isMobile > li.deeper > span{
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.responsiveMenuTheme5m.isMobile > li.deeper > span:before {
content: "\f0d7";
}
You should be able this by changing css of span element. If everything is ok and font awesome is imported correctly by adding:
.responsiveMenuTheme5m.isMobile > li.deeper > span:before {
content: "\f0d7";
}
your font will appear.
You can check out this code http://fontawesome.io/icon/caret-down/
You may also try this one:
.responsiveMenuTheme5m.isMobile > li.deeper > span {
background-position: right 57px !important;
background-repeat: no-repeat !important;
}
Replace the caret with the following code:
<i class="fa fa-caret-down"></i>
You might have to use the <span> as an option, like so:
<span class="fa fa-caret-down"></span>
You might have to play with the left caret distance by changing the values found in the background-position.
Related
I am trying to vertically align my "dropdown arrow" in a naviation menu.
I have tried varioust hings like vertical-align: middle, display: inline-block and stuff like that but that didn't help at all.
http://img02.imgland.net/jfCmDoW.png
The HTML looks like this:
<li>
<a href="#!" data-activates="dropdown1">English
<i class="material-icons">arrow_drop_down</i>
</a>
</li>
I have created a JSFiddle which demonstrates the problem: https://jsfiddle.net/dbwaoLrh/
Explanations of what I am doing wrong there are highly appreciated as I face this issue every time I am using "custom" font sizes using the materialize-framework.
You might have tried various styling to arrange your icons, but you need to target your icons i.e. i tag as below and style,
.footer-links > li > a > i{
vertical-align:middle;
}
Check this two jsFiddle, I have added background to one just for understanding purpose.
https://jsfiddle.net/dbwaoLrh/2/
https://jsfiddle.net/dbwaoLrh/4/
Try this
.material-icons {
vertical-align: 1px; /*Change this to adjust the icon*/
}
Second option is you can use is:
.material-icons {
position: relative;
top: 1px; /*Change this to adjust the icon*/
}
What you are doing wrong
There is css rule for icon: font-size:24px which is greater than the parent anchor element and line height is 1 so resulting line height is 24px; that's why it was not working. If you want you can use your own code just change the line-height equal to parent anchor element and use vertical-align:middle for icon
See Js Fiddle
.material-icons {
display: flex;
align-items: center;
justify-content: center;
}
You should add vertical-align: middle; rule for .material-icons:-
.material-icons {
vertical-align: middle;
}
I know it is an old question, but i find this solutions working better with every line-height:
.material-icons {
vertical-align: middle;
line-height: 1px;
}
I was using font Awesome and to get the exact same Vertical Align with Material Font, I setup this CSS and it aligns perfectly
.material-icons {
vertical-align: middle;
padding-bottom: 3px }
Tested in Firefox, Chrome, InternetExplorer and Edge.
I am trying to rotate a glyphicon that's been added :before an a tag. I have tried a lot that doesn't seem to work, but must be missing something simple. The a tag will change from Closed/Open when clicked, which should trigger the animation
.Closed:before {
font-family: "Glyphicons Halflings";
content:"\e258";
}
<a class='FolderTitle Closed'>Providers</a>
It just needs to rotate 90 degrees and keep it's position - any ideas / JSFiddles?
Set display: inline-block; on your pseudo element. After that you'll be able to rotate your content. So your CSS should look like this:
.Closed:before {
display: inline-block;
font-family: "Glyphicons Halflings";
content: "\e258";
transform: rotate(90deg);
}
Demo
I found a somewhat annoying glitch in Firefox. See this jsfiddle: http://jsfiddle.net/zMX75/2/.
The blue part is supposed to be hoverable. But, in Firefox with a button tag, it simply does not work.
Here is the code:
button, .button {
position:relative;
overflow:visible;display:inline-block;
height:23px;padding:0 5px;border:0;margin-left:20px;
font-size: 12px;line-height:23px;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
color: #000;
background: #ff0;
&::before, &::after {
position:absolute;top:0;
display:inline-block;width:20px;height:23px;
content: "";
background: #00f;
}
&::before {left:-20px;}
&::after {right:-20px;}}
I use this code to make an arrow like button using a sprite.
So, I'd like to know if there is a workaround other than changing the tag, because it is used to submit a form.
One solution is to give the button some left and right padding, and to position its ::before and ::after over the padding; so that they are inside the button's clickable area.
In other words, adding this to the CSS works:
button {padding:0 25px; margin-left:0;
&::before {left:0}
&::after {right:0}
}
See updated fiddle.
That said, I'm not sure why it does work with the <a>. If the button needs to be solved like this, why doesn't the <a> need to be treated the same way? Oh well.
Give
display:block;
Not
display:inline-block;
FontAwesome 3.2.1
I want to use Awesome stacked icons (font icons that placed one upon the other) using only CSS. Is it possible to define concrete icons some special CSS rule ?
Now stacked icons are used so, so icon-check-empty will be shown over icon-twitter.
<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i>
<i class="icon-twitter"></i>
</span>
I want to define CSS rules (myclass) so that I can use it in one span instead.
my.css
icon-twitter-on-icon-check-empty { }
.....
my.html
<span class="icon-twitter-on-icon-check-empty" />
If I understand you correctly, certainly.
You should create a generic class for establishing the spacing for your icons and the background image to be added, then a chained or complementary class for determining the sprite's background position.
Edit: I didn't realize you wanted to actually display several icons on top of one another. That's a very different matter. You would want to use positioning to do that.
Through CSS only, this has the Face Time icon in the before of the CSS and the pause on top in red in the after. I'm using this code to override a web theme, which is why there is a background-image:none.
So in your css:
.videoIcon {
background-image:none!important;
position:relative;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size:small;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.videoIcon:before {
content: "\f03d";
vertical-align: middle;
position: absolute;
left: 0;
}
.videoIcon:after{
content:"\f04c";
position: absolute;
right: 0;
bottom:0;
color:red;
font-size:smaller;
}
I have some CSS that looks like this:
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
I would like to replace the image with an icon from Font Awesome.
I do not see anyway to use the icon in CSS as a background image. Is this possible to do assuming the Font Awesome stylesheets/fonts are loaded before my CSS?
You can't use text as a background image, but you can use the :before or :after pseudo classes to place a text character where you want it, without having to add all kinds of messy extra mark-up.
Be sure to set position:relative on your actual text wrapper for the positioning to work.
.mytextwithicon {
position:relative;
}
.mytextwithicon:before {
content: "\25AE"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}
EDIT:
Font Awesome v5 uses other font names than older versions:
For FontAwesome v5, Free Version, use: font-family: "Font Awesome 5 Free"
For FontAwesome v5, Pro Version, use: font-family: "Font Awesome 5 Pro"
Note that you should set the same font-weight property, too (seems to be 900).
Another way to find the font name is to right click on a sample font awesome icon on your page and get the font name (same way the utf-8 icon code can be found, but note that you can find it out on :before).
Actually even font-awesome CSS has a similar strategy for setting their icon styles. If you want to get a quick hold of the icon code, check the non-minified font-awesome.css file and there they are....each font in its purity.
Consolidating everything above, the following is the final class which works well
.faArrowIcon {
position:relative;
}
.faArrowIcon:before {
font-family: FontAwesome;
top:0;
left:-5px;
padding-right:10px;
content: "\f0a9";
}
To use font awesome using css follow below steps -
step 1 - Add Fonts of FontAwesome in CSS
/*Font Awesome Fonts*/
#font-face {
font-family: 'FontAwesome';
//in url add your folder path of FontAwsome Fonts
src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}
Step - 2 Use below css to apply font on class element of HTML
.sorting_asc:after {
content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
padding-left: 10px !important;
vertical-align: middle;
}
And finally, use "sorting_asc" class to apply the css on desired HTML tag/element.
You can try this example class. and find icon content here: http://astronautweb.co/snippet/font-awesome/
#content h2:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
content: "\f007";
}
I am bit late to the party. Just like to suggest another way.
button.calendar::before {
content: '\f073';
font-family: 'Font Awesome 5 Free';
left: -4px;
bottom: 4px;
position: relative;
}
position, left and bottom are used to align the icon.
Sometimes adding font-weight: 600 or above also helps.
No need to embed content into the CSS. You can put the badge content inside the fa element, then adjust the badge css. http://jsfiddle.net/vmjwayrk/2/
<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
<span style="
background-color: navy;
border-radius: 50%;
font-size: .25em;
display:block;
position:absolute;
text-align: center;
line-height: 2em;
top: -.5em;
right: -.5em;
width: 2em;
height: 2em;
border:solid 4px #fff;
box-shadow:0px 0px 1px #000;
color: #fff;
">17</span>
</i>
#content h2:before {
content: "\f055";
font-family: FontAwesome;
left:0;
position:absolute;
top:0;
}
Example Link:
https://codepen.io/bungeedesign/pen/XqeLQg
Get Icon code from:
https://fontawesome.com/cheatsheet?from=io
Alternatively, if using Sass, one can "extend" FA icons to display them:
.mytextwithicon:before {
#extend .fas, .fa-angle-double-right;
#extend .mr-2; // using bootstrap to add a small gap
// between the icon and the text.
}
It seems that the given answers don't give a real background as the fontawesome is rendered outside the bloc you want the background in.
Here is my solution to have a "real" background effect :
html :
<div id="bloc" class="bg_ico_outer" style="">
<i class="fa fa-bookmark-o bg_ico"></i>
<div class='bloc_inner'>
<h2>test fontawesome as background</h2>
</div>
</div>
css :
.bg_ico {
position: absolute;
top: 0px;
right: -10px;
font-size: 17em;
color: green;
transform: rotate(25deg);
}
.bg_ico_outer{position: relative; overflow: hidden;}
#bloc{
height: 200px;
width:200px;
background: blue;
margin:50px auto;
}
.bloc_inner{
position: absolute;
}
h2{color: white;}
For this you just need to add content attribute and font-family attribute to the required element via :before or :after wherever applicable.
For example: I wanted to attach an attachment icon after all the a element inside my post. So, first I need to search if such icon exists in fontawesome. Like in the case I found it here, i.e. fa fa-paperclip. Then I would right click the icon there, and go the ::before pseudo property to fetch out the content tag it is using, which in my case I found to be \f0c6. Then I would use that in my css like this:
.post a:after {
font-family: FontAwesome,
content: " \f0c6" /* I added a space before \ for better UI */
}
This seems to be the simplest solution :-)
#content h2:before {
font-family: FontAwesome;
content: "\f055";
position:absolute;
left:0;
top:0;
}