The code I have below manages to change the style of my font, but it makes the icon disappear. Any tips on how to make the icon appear while having the font style change?
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css">
<i style="font-family: Verdana, Geneva, Tahoma, sans-serif" class="fa fa-plus-circle" id="#accordianChild1" onclick="changeIcon('#{#accordianChild1}')">
Invoice number: </i>
Add the font-family of Font Awesome to the list so it get used for the icon:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >
Before<br>
<i style="font-family: Verdana, Geneva, Tahoma, sans-serif" class="fa fa-plus-circle" >
Invoice number: </i>
<br>
After<br>
<i style="font-family: Verdana, Geneva, Tahoma, sans-serif, 'Font Awesome 5 Free'" class="fa fa-plus-circle" >
Invoice number: </i>
Related: Font Awesome 5 - Choosing the correct font-family in CSS pseudo-elements
But better avoid using text inside the icon element to avoid such issue and also avoid inheriting the font-weight of the icon:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >
<i class="fa fa-plus-circle" ></i><span style="font-family: Verdana, Geneva, Tahoma, sans-serif" >Invoice number: </span>
If you try to change the font-weight you will break the icon because that version may be a Pro one:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >
<br>
<i style="font-family: Verdana, Geneva, Tahoma, sans-serif, 'Font Awesome 5 Free'" class="fa fa-plus-circle" >
Invoice number: </i>
<br>
<i style="font-weight:400;font-family: Verdana, Geneva, Tahoma, sans-serif, 'Font Awesome 5 Free'" class="fa fa-plus-circle" >
Invoice number: </i>
Related: Font Awesome 5 on pseudo elements shows square instead of icon
Related
I have the following code:
<a href="#home">
<i class="fas fa-chart-bar fa-lg">
<span class="card-text card-textWithIcon">serif font</span>
</i>
</a>
it shows an image and a short text. It works fine but the text is in a serif font. How can I switch to a sans serif font?
I'm using Bootstrap 4 and Fontawesome 5.8.1
Edit 1:
I added
font-family:sans-serif !important
to the .fa class. But then the icon is visible as an rectangle (which is wrong).
Edit 2:
I added two new classes:
.span {
font-family:Sans-Serif
}
.sansserif {
font-family:Sans-Serif
}
and added the .sansserif to the span-element:
<span class="card-text card-textWithIcon sansserif">serif font</span>
But this did not work.
Solution: see second comment from elveti
"You should not add additional content into your icon. Put it afterwards, like serif font – elveti 2 mins ago"
You should use Font Awesome as font family for all i tags then Sans-Sarif for everything else or what you want to use it for
i.fas {
font-family: 'Font Awesome\ 5 Free' !important;
font-style: none
}
* {
font-family:Sans-Serif;
}
Try the below method. You can set the font-family to root element or body tag.
body {
font-family:Sans-Serif;
}
a .fas {
font-family: "Font Awesome 5 Free";
}
.card-text {
font-family: Sans-Serif;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<a href="#home">
<i class="fas fa-chart-bar fa-lg">
<span class="card-text card-textWithIcon">serif font</span>
</i>
</a>
I'd like to specify Arial Bold as the fallback font in a #font-face rule.
Like this:
#font-face {font-family: myCustomFont; src: url(http://unreachableHost/font1b.ttf), local(Arial Bold)}
But it doesn't work. At least not in Chrome. The fallback is not Arial Bold or even Arial Regular.
Here is an example with several font families.
#font-face {font-family: mustBeArialBold; src: url(http://unreachableHost/font1b.ttf), local(Arial Bold)}
#font-face {font-family: mustBeVerdanaBold; src: url(http://unreachableHost/font2b.ttf), local(Verdana Bold)}
#font-face {font-family: mustBeSegoeBold; src: url(http://unreachableHost/font3b.ttf), local(Segoe UI Bold)}
#font-face {font-family: mustBeTimesBold; src: url(http://unreachableHost/font4b.ttf), local(Times New Roman Bold)}
<body style="text-align: right">
<b style="font-family: Arial">This is Arial Bold</b> <br>
<c style="font-family: mustBeArialBold">This should be Arial Bold</c> <br><br>
<b style="font-family: Verdana">This is Verdana Bold</b> <br>
<c style="font-family: mustBeVerdanaBold">This should be Verdana Bold</c> <br><br>
<b style="font-family: Segoe UI">This is Segoe UI Bold</b> <br>
<c style="font-family: mustBeSegoeBold">This should be Segoe UI Bold</c> <br><br>
<b style="font-family: Times New Roman">This is Times New Roman Bold</b> <br>
<c style="font-family: mustBeTimesBold">This should be Times New Roman Bold</c> <br><br>
Is it possible to do this? How?
FOLLOW UP:
Here is the solution suggested by #Kerri
#font-face {font-family: mustBeArial; src: local(Arial)}
#font-face {font-family: mustBeVerdana; src: local(Verdana)}
#font-face {font-family: mustBeSegoe; src: local(Segoe UI)}
#font-face {font-family: mustBeTimes; src: local(Times New Roman)}
<body style="text-align: right">
<b style="font-family: Arial">This is Arial Bold</b> <br>
<b style="font-family: mustBeArial">This should be Arial Bold</b> <br><br>
<b style="font-family: Verdana">This is Verdana Bold</b> <br>
<b style="font-family: mustBeVerdana">This should be Verdana Bold</b> <br><br>
<b style="font-family: Segoe UI">This is Segoe UI Bold</b> <br>
<b style="font-family: mustBeSegoe">This should be Segoe UI Bold</b> <br><br>
<b style="font-family: Times New Roman">This is Times New Roman Bold</b> <br>
<b style="font-family: mustBeTimes">This should be Times New Roman Bold</b> <br><br>
The resulting text is something that kind of looks like bold text but it's nothing like the true bold font.
I don't have a font called "Arial Bold" (I do have "Arial Black", though) on my computer, so the local() function isn't going to find an appropriate font to use. The display defaults to Times New Roman, as expected.
However, I do have Arial, so any call to plain old "Arial" works as expected.
In your code,
<b style="font-family: Arial">This is Arial Bold</b>
calls the font named Arial (which I've got), and since you've wrapped it in b tags, it's displaying as bold. So far so good.
But there's no such font as "Arial Bold" locally.
<c style="font-family: mustBeArialBold">This should be Arial Bold</c>
won't find a font called "Arial Bold" (because that doesn't exist on my computer), and since it's in a c element (what is that?) and not a b element, it's not going to display as bold. If you changed your c elements to b elements, your text would display as bold.
While you can try to add styling to your #font-face declarations, I tend to avoid doing font styling that way, and instead apply styles to classes. (A font face is a different thing than a font style, unless the styling is intentionally built into the font face by the developer of the font.) There's some good guidance here on how that works. https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/
I have e very big data and i want to give class dynamically by state.
"<td>
<i class='fullPassengerListState_" + data[i].State + "'>"
+ data[i].State + "
</i>
</td>"
I want this
fullPassengerListState_1 class should be fa-check (Font Awesome)
fullPassengerListState_0 class should be fa-times (Font Awesome)
I don't want to use if ( data[i].state == 0 ) or something like that.
Simply do it in css by pesudo :before to .fullPassengerListState_1/0:
NOTE!
I use to the example Font Awesome 5
.fullPassengerListState_1:before{
content:'\f00c';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
.fullPassengerListState_0:before{
content:'\f00d';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<i class='fullPassengerListState_0'> state 0
</i>
<i class='fullPassengerListState_1'> state 1
</i>
I'm trying to insert this API code into MailChimp: <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
I want the text to be light 300 but am totally lost. Can anyone help me code this?
<div style="text-align: left;"><span style="font-family:open sans,helvetica neue,helvetica,arial,sans-serif">🇪🇹<span style="font-size:18px"><span style="color:#000000"><strong>Ethiopia: </strong><br />
Prime Minister resigns abruptly after years of violent anti-government protests and a failed nationwide state of emergency. The country’s future is uncertain. </span></span></span><br />
</div>
<div style="text-align: right;"><span style="font-family:open sans,helvetica neue,helvetica,arial,sans-serif"><span style="font-size:14px">📍 <span style="color:#000000">John Smith, 35, Kosovo</span></span></span></div>
If you have added the <link rel=stylesheet..> correctly in your HEAD section. Change the font-family:open sans,helvetica neue,helvetica,arial,sans-serif to font-family: 'Open Sans', sans-serif; and add font-weight: 300;
<div style="text-align: left;"><span style="font-family: 'Open Sans', sans-serif; font-weight: 300;">🇪🇹<span style="font-sizee:18px"><span style="color:#000000"><strong>Ethiopia: </strong><br />
Prime Minister resigns abruptly after years of violent anti-government protests and a failed nationwide state of emergency. The country’s future is uncertain. </span></span></span><br />
</div>
<div style="text-align: right;"><span style="font-family: 'Open Sans', sans-serif; font-weight: 300;"><span style="font-size:14px">📍 <span style="color:#000000">John Smith, 35, Kosovo</span></span></span></div>
Please do the three steps as follows,
Add the <Link> tag. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
Change the current font family as follows: font-family: 'Open Sans';
You want the text to be in 300px,then add font-weight: 300;
I've tried your example in jsFiddle and attached the corresponding link below.
https://jsfiddle.net/2ker4mop/2/
The messy code comes from pasting in from WORD. I have resolved most of the issue with inline styling but I can't figure out how to get the to be font-weight:900;
<p>
<span style="color: #000000;">
<span style="font-family: 'Lucida Grande', serif;">
<span>
<b>Intensity of Service</b>
</span></span> </span></p>
Here is the example page: https://www.racmonitor.com/word
"Intensity of Service" should be font-weight:900 but is staying at 300.