i have the code for inputting font-face icons and it is working very properly but only into , , or tags. when i try to use font-faces icons into form buttons (eg. image buttons, submit buttons, reset buttons...) it doesn't show.
hege goes the css code:
#font-face {
font-family: "Flaticon";
src: url("flaticon.eot");
src: url("flaticon.eot#iefix") format("embedded-opentype"),
url("flaticon.woff") format("woff"),
url("flaticon.ttf") format("truetype"),
url("flaticon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-family: Flaticon;
font-size: 20px;
font-style: normal;
margin-left: 20px;
}.flaticon-delete13:before {
content: "\e000";
}
and here goes the html snippet code that works fine:
<body>
<div class="glyph-icon flaticon-delete13"></div>
</body>
this is the link that goes into the header:
<link rel="stylesheet" type="text/css" href="flaticon.css">
i want to put this font-face icon into a form button (eg. submit button) along with a text. for instance: an icon "cross" along with the text "Add".
thanks in advance.
If you implement font icon it is not possible with input tag.
Instead, use this for submit button:
<button class='button' type='submit'><span class="glyph-icon flaticon-delete13"></span>Submit</button>
I would recommend using Font Awesome to achieve this result.
Check out my jsfiddle: http://jsfiddle.net/irkanu/7VytQ/
I also used Bootstrap to achieve the minimal styling to the form.
The code for the button would be:
<button type="submit" class="btn btn-default"><i class="fa fa-plus"></i> Add</button>
Is this what you looking for. You can use icomoon to create your own icons
http://jsfiddle.net/SKMN9/
<button type="submit" class="buttons add">Add New Page</button>
Related
So, on Windows default font family files don't have flag emoij (e.g. 🇺🇸 turns into 🇺 and 🇸). You can add this emoij by defining #font-face.
How do you make that, the fallback family is the previous value? Or how to append it? Or how to do it in general (adding a character to the font-family)?
UPD: Ok, here is an example:
#font-face {
font-family: 'Country Flags';
unicode-range: U+1F1E6-1F1FF;
src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill#0.1/dist/TwemojiCountryFlags.woff2') format('woff2');
}
*{
font-family: Fantasy;
}
#f{
font-family: 'Country Flags';
}
<p>Windows 🇺🇸</p>
<p id="f">Custom 🇺🇸</p>
Look. Setting font-family: 'Country Flags'; overrides every previous font-family.
You can have a plagin to add CSS, like Stylish.
It adds CSS file to page.
The overriding of previous font-family is a problem, because you break what page is trying to indicate. For example StackOverflow use ui-monospace for editor and -apple-system for normal text.
Again, that's only an example. If there is no why of adding emoij by this kind of plugin, then I will need to make new, more complex, plugin. Do you understand me now?
Just declare two fonts in font-family property?
body {
font-family: a, b;
}
Take a look at the code snippet below, which uses Thai symbols and Thai font for them. But other symbols which are not Thai will use Arial. So in your case just use font-family: Fantasy, "Country Flags";
#import url('https://fonts.googleapis.com/css2?family=Charm&display=swap');
body {
font-size: 20px;
display: flex;
flex-direction: column;
color: black;
}
.arial-charm {
font-family: "Arial", "Charm";
}
.charm-arial {
font-family: "Charm", "Arial";
}
.charm {
font-family: "Charm";
}
.arial {
font-family: "Arial";
}
<span class="arial-charm">Arial + Charm: ฟà¸à¸™!🇺🇸 test</span>
<span class="charm-arial">Charm + Arial: ฟà¸à¸™!🇺🇸 test</span>
<span class="charm">Charm: ฟà¸à¸™!🇺🇸 test</span>
<span class="arial">Arial: ฟà¸à¸™!🇺🇸 test</span>
Default font: ฟà¸à¸™!🇺🇸 test
I am developing my first application at Vue and I must say that I am having a hard time finding practical examples and complete information for all the problems I am encountering.
Right now I'm trying to use an icon font that I've created with iconomoon. I've imported it into my project and I've declared it as a font-face in my style, importing the declaration of the icon I want to test with into the same style.
At first I had a webpack configuration error that I have already corrected, but when I declare my icon in my html template only a box with a border appears but the icon is not shown
Here is my template
<header>
<nav class="navbar navbar-expand-lg navbar-light header">
<img class="logo" src="../../assets/logo.png">
<i class="icon-ic-fluent-home-24-regular"></i>
and here my css
<style>
#font-face {
font-family: "icomoon";
src: url(../../icons/icomoon.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}
.icon-ic-fluent-home-24-regular:before {
content: "\e908";
}
[![project strucutre][1]][1]
</style>
Can someone tell me what my mistake is?
Thank you very much for your time and help in advance
[![the square in the image corresponds to what it shows instead of the][1]][1]
[1]: https://i.stack.imgur.com/btYW0.png
You need to tell the icon to use the font you created:
<i class="icon icon-ic-fluent-home-24-regular"></i>
<style>
#font-face {
font-family: "icomoon";
src: url(../../icons/icomoon.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}
.icon {
font-family: "icomoon"
}
.icon-ic-fluent-home-24-regular:before {
content: "\e908";
}
</style>
I am trying to change the content of a span with a Font Awesome icon directly from the CSS page but can't seem to make it work properly.
1) I have imported FA from the documentation and in the <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
2) My html looks like this :
<span class='myClass'>Movies</span>
3) Let's now say I would like to change the content of the span with an icon directly from the CSS Page.
My css currently looks like this but it isn't working, it gives me a square instead of the icon.
.myClass {
font-size:25px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: '\f008';
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class='myClass'></span>
Funny thing is that it looks like it is working with some icons. If I test with content: '\f007'; it works. Any idea why?
(And if you wonder why I want to change the icon directly in the CSS, it is because I am using media queries so I can't add it directly in the HTML page)
If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version
You need to add
font-weight:900
.myClass {
font-size:45px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f008";
font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'></span>
The regular version of the icon, defined by the default font-weight, is PRO so it will show an empty square. What you need is the solid version:
https://fontawesome.com/icons/film?style=solid
Why the other icon is working?
Because the \f007 is this icon : https://fontawesome.com/icons/user?style=regular and as you can see, the regular one is not PRO and is included in the free package so you don't need to specify a font-weight. You only need to specify it when you want to show the solid version.
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f007";
visibility: visible;
font-weight: 900;
}
.myClass-1::after {
font-family: 'Font Awesome 5 Free';
content: "\f007";
visibility: visible;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<span class='myClass'>Solid </span>
<br>
<span class='myClass-1'>Regular </span>
As a side note, all the light and duotone versions are included in the Pro package so will always show empty square whataver the font-weight used
You can check the documentation for more details : https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
Related questions
Font Awesome 5 shows empty square when using the JS+SVG version
Font Awesome 5 unicode
Font Awesome 5, why is css content not showing?
from your comment :
Awesome, thanks for the explanation ! Do you know what font-weight I would need to use if the light version would have been free ?
test text-stroke with a transparent color to get a thinner render :
.myClass {
font-size: 45px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f008";
font-weight: 900;
-webkit-text-stroke;
transparent 0.2em;
}
.myClass+.myClass::after {
-webkit-text-stroke: white 0.02em;
}
.bis {
font-size: 4rem;
color: blue
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'></span>
<span class='myClass'></span>
<span class='myClass bis '></span>
<u>
<span class='myClass bis '></span></u>
list-style-image: url("../../media/examples/rocket.svg");
source: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image
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've a div with text in div.But the weird behavior occurs when glyphicon is added,that is spacing between the words has become more.
How to avoid this ?
<div class="glyphicon glyphicon-chevron-up">With glyphicon</div>
<div>Without glyphicon</div>
Demo of the issue
Demo of Implementation in my application
This one works...
<div class="glyphicon glyphicon-chevron-up"></div>With glyphicon
<div>Without glyphicon</div>
If you can't use this then use this one :
<div class="glyphicon glyphicon-chevron-up" style="color: steelblue;font-size: initial;" data-toggle="collapse" href="#new"></div><span style="color: steelblue;font-size: initial;" href="#new">
Glyhicon div with collapse</span>
<div class="collapse in" id="new">
Something goes here
</div>
Then you only have option to click on icon to toggle.
You can add a span for the Glyphicons
<div><span class="glyphicon glyphicon-chevron-up"></span>With glyphicon</div>
<div>Without glyphicon</div>
It works well and its a good practice to add a separate span for the glyphicons.
What is happening in your code is that the glyphicon class property is being applied to the content that you are writing within the div tag.
glyphicon class applies the font-family : 'Glyphicons Halflings' in which the symbol can be rendered. But you have added your text inside same <div>. So that font will be applied to your text too. I have moved the text to another <span> and applied the desired font-family : 'sans-serif' to the text.Which solves the issue OR simply move your text out of that <div>, that too will work
With glyphicon
Without glyphicon
New Class
.newFont{
font-family: sans-serif
}
JdFiddle
If you want to avoid the text and you want to write text inside glyphicon you should add to bootstrap glyphicon class the before attribute so it gives effect only to the before like this :
/*add the :before to glyphicon */
.glyphicon:before {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}