I am unable to edit this font from FontAwesome. When I add <i class="fas fa fa-child"></i> to my code I can see the child figure. But when I added this to my CSS:
.fa {
background-color: green;
color: red;
}
But, nothing happened to the child icon. I know this is something little but I can't figure out how to solve the issue.
FontAwesome5 that you are using is SVG based, so u need to edit it like SVG.
Visit - https://css-tricks.com/using-svg/
Related
I don't know why but only in production some material icon doesn't appear, as you can see from the image the first icon is missing:
here's the code:
<mat-nav-list>
<a mat-list-item routerLink="/dashboard" matTooltip="dashboard">
<mat-icon matListIcon>bar_chart</mat-icon>
</a>
<a mat-list-item (click)="routeToContacts()" matTooltip="contacts">
<mat-icon matListIcon>people</mat-icon>
</a>
You need to insert style into the project:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
If it did not solve the problem, please try to add the code below in your style.css (or style.scss) :
md-icon{
font-family: 'Material Icons' !important;
}
If you are using SASS and have opacity set to a percentage like
mat-icon {
opacity: 50%;
padding-right: 0.5em;
}
The icons might "disappear" in production builds because a SASS rule. The result is your opacity is 0% or 1% in the CSS files produced.
Changing the opacity to a decimal will give you the result you were expecting.
mat-icon {
opacity: 0.5;
padding-right: 0.5em;
}
Had a similar issue, the icon event_repeat appearad as two wrong icons in production build but worked in development build. The build process changes how fonts are embedded. In my case an old version of the woff2-file was loaded (v109 instead of the current v121). The appropriate css in the folder node_modules\.cache\angular-build-fonts, so I deleted node_modules and ran cmp ci. That fixed this issue.
I am using a WordPress theme called Divi. This isn't a WordPress question. There are a number of provided social media icons, but I need a Soundcloud icon, and that is not provided. I'm not understanding how these icons are populating the page as they don't seem to be graphics, but rather are a font? However, I am unable to tell from the source code what is going on (inexperience).
What I'm trying to do is either add an icon of my design, or replace an existing icon. Can someone help point me in the direction if where I should be looking within my files to find the actual icons?
You can see a live site here and the icons are at the top right:
http://rattletree.com/wordpress2/
The dev code has this for the Facebook icon:
<ul class="et-social-icons">
<li class="et-social-icon et-social-facebook">
<a href="#" class="icon">
<span>Facebook</span>
</a>
</li>
</ul>
And the css has this:
.et-social-facebook a.icon:before {
content: "\e093";
}
#top-header .et-social-icon a {
font-size: 14px;
}
So that makes me think this is a font, but I don't know how or where I can edit that font? Thanks for any help!
This looks like the font pack you are using:
http://www.elegantthemes.com/blog/resources/elegant-icon-font
It doesn't look like it has an icon for soundcloud, but you could use the cloud one:
So just add this to the style sheet:
.et-social-soundcloud a.icon:before {
content: "\e002";
}
Also, here's a tutorial:
https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website
To add an icon of your design, add the following code to your stylesheet.
#top-header .et-social-icon.soundcloud a {
width: 15px;
height: 25px;
}
.soundcloud a.icon:before {
content: "";
background: url('https://placehold.it/15x25') 100% 100% no-repeat;
height: 100%;
width: 100%;
display: inline-block;
}
Make sure you create an icon, add the icon image to theme folder and update the url in the above code to point to that image.
Also add the class soundcloud to your menu in WordPress backend.
I would like to set custom icon (ionicons) size for this code:
<button class="button button-icon icon ion-stop customIconSound"></button>
For class customIconSound i tried following:
button.customIconSound,button.button-icon {
font-size: 52px !important;
color: #fff;
line-height: 55px!important;
}
But without luck. If i tried icon class without the button button-icon class i fount that it is working but without button class icons has not pressed state (because is it not a button).
How can i solve it please?
Thanks for any advice.
Lucas was close but the correct syntax is this one
button.customIconSound:before {
font-size: 22px !important;
}
If you didn`t solve your problem yet or for people dealing with it in future.
You have to change css style for i pseudo element :before
button.customIconSound i:before {
font-size: 52px !important;
}
Your example is working here.
Maybe your problem is caused by something else.
PS: If you want only to resize the icon this css line is enough.
.customIconSound {
font-size: 52px;
}
Try ruling button-icon class out. That css class was the trouble in my case. Likewise, as a result, css styles worked on button tag too. For example:
<button class="button button-clear ion-edit" style="color:#fff; font-size:22px"></button>
Any light that could be shed on this would be hugely appreciated.
I have a SPAN in which I'm not able to apple the fontawesome FA class to this span. So I need to write a custom style to add the icon to my SPAN.
And I'm using SASS for my stylesheets.
OK, in my vendor.scss I am importing font awesome like so..
#import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
And font awesome works a treat when using their defined classes..
<i class="fa fa-camera-retro fa-lg"></i>
But when I try and create my own by using css content it does not work? See below..
.addthis_sharing_toolbox {
SPAN {
color: #ffffff;
background: #000000;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
}
.at-svc-facebook SPAN {
content: '#f09a';
}
.at-svc-twitter SPAN{
content: '#f099';
}
.at-svc-google_plusone_share SPAN {
content: '#f0d5';
}
}
Can anyone see where I'm going wrong?
Thanks
You can't use Unicode like that in CSS. You need to format it with a backslash in place of your pound marker.
Example
.at-svc-twitter span:before {
content: '\f099';
}
Also, content is only valid when in use with pseudo elements in CSS. So we need to set it on the :before pseudo instead of the span option.
I'm displaying one of the Twitter Bootstrap provided icons in an anchor. I want the default icon to be switched to icon-white when i have the mouse over the anchor.
The effect should be like when you hover over the anchors in the navbar here
How is this done?
You use the CSS pseudo-class :hover to set a different background:
.menulink:hover { background-image: url('alternative_sprite.png'); }
Use jQuery toggleClass() on hover to change the icon to white.
See this jsfiddle.
HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<a href="#"><div class="btn btn-primary">
<i class="glyphicon glyphicon-print"></i> Click</div></a>
<br/>
Script:
$("document").ready(function(){
$("a").hover(function(){
$('i').toggleClass('glyphicon-envelope glyphicon-print');
});
});
just switch over the glyphicons image?
(extracted from my css, which is a sass version, and my images are in a different place, but you get the idea...)
&:hover{
i{
background-image: url("../images/bootstrap/glyphicons-halflings-white.png");
}
Actually, the AngularJS website uses a webfont to display icons:
font-family: 'FontAwesome';
And they insert the font-icon using CSS pseudo-class :before:
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: FontAwesome;
}
Which it is a brilliant solution, if you resolve to create your own icon web font.
Or even better, you can use Font-Awesome.
Use CSS psuedo-class :hover..
.menulink:hover { background-image: url('myimage.png'); }
Some of the answer above are not working and give a background image with all glyphicons at ones.
This works form me. Notice that I have changed the color of the icons to fits my needs.
a:hover > [class^="icon-"] {
background-image: url("bootstrap/img/glyphicons-halflings-orange-dark.png") !important;
}
I know there are already a few quick solutions posted that will do the trick. I would like to add my solution if you would like to achieve this without using JQuery or CSS:
Crate an $scope object that contains the name of the icon class your would like to set by default.
$scope.myClass = "glyphicon glyphicon-ok"
Add ng-class directive and get the class name from $scope.MyClass, add ng-mouseover and ng-mouseleave directives and change $scope.MyClass value
<span
ng-class="myClass"
ng-mouseover="myClass = 'glyphicon glyphicon-remove'"
ng-mouseleave="myClass = 'glyphicon glyphicon-ok'">
</span>