I am currently using <span class="icon-home2"></span> to show icons in my CSS file:
#font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?4r9x8o');
src: url('fonts/icomoon.eot?4r9x8o#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?4r9x8o') format('truetype'),
url('fonts/icomoon.woff?4r9x8o') format('woff'),
url('fonts/icomoon.svg?4r9x8o#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-home:before {
content: "\e900";
}
Now I have a different requirement in which I need show the icons, with content in CSS, using unicode that is mapped here:
.icon-home:before {
content: "\e900";
}
Can anyone tell me how can I achieve this?
I got the answer:
add in css file
[data-icon]:before {
font-family: icomoon; /* BYO icon font, mapped smartly */
content: attr(data-icon);
speak: none; /* Not to be trusted, but hey. */
}
and access with
<i aria-hidden="true" data-icon=""></i>
remember to append &#x before unicode of icons eg icon code is e001 then data-icon=""
Related
I created some icons using FontForge, and the icons work in all modern browsers except for Safari. What would be causing Safari to be the only browser that doesn't display the fonts?
This is the SCSS that is being used:
#font-face {
font-family: 'MyFont';
src: url('/assets/fonts/MyFont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.my-font-icon {
font-family: 'MyFont';
display: inline-block;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
&:before {
font-family: 'MyFont';
display: inline-block;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
&.my-font-questions:before {
content: "\0001";
}
&.my-font-chevron-left:before {
content: "\0002";
}
&.my-font-close:before {
content: "\0003";
}
}
Safari requires the TrueType/ttf font version and really you should be including several different types rather than just woff2 which is the most modern type. Here's a sample list from the CSS Tricks article here, the browser finds the font it understands and renders that one:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
FontForge should provide you these other font types, but if it doesn't, you'll need to go to FontSquirrel to render them (if you have the licence and permission to do so):
https://www.fontsquirrel.com/tools/webfont-generator
I am using Vue Material to build a multi-lingual application. How can I declare Chinese fonts to be used?
App.vue
App.vue loads the Material Design font locally.
<script>
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
import './assets/material-icons.css'
Vue.use(VueMaterial)
...
...
...
</script>
material-icons.css
At the top of this file, I have added the default/popular Chinese font for Microsoft and MacOS
#font-face {
font-family: 'Microsoft Yahei', '微软雅黑', '宋体';
font-style: normal;
font-weight: normal;
src: local('Microsoft Yahei'), local('微软雅黑');
}
#font-face {
font-family: 'STXihei', '华文细黑', '宋体';
font-style: normal;
font-weight: normal;
src: local('STXihei'), local('华文细黑');
}
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2'),
url(MaterialIcons-Regular.woff) format('woff'),
url(MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Chinese font not used
This is a sample element with Chinese font
<div class="md-button-content">中文字</div>
Inspecting the element using Firefox development tool shows that the Chinese fonts are not applied
How can I ensure the proper Chinese font is used?
Reference: http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/
I have a html form generator like this. In this form generator users only can select a font icon from list. I did like it but I need to add new option that user can add custom font icons and uses it.
For implementing this option I try to do it like The Beginner's Guide to Icon Fonts in WordPress but I encountered a issue.
In downloaded custom icon font files exist a style.css file that I added content of them to my website CSS file (I have one CSS file and I can't add two css file for custom icon file) like this:
#font-face {
font-family: ico1;
src: url('fonts/ico1.eot?411a7m');
src: url('fonts/ico1.eot?411a7m#iefix') format('embedded-opentype'),
url('fonts/ico1.ttf?411a7m') format('truetype'),
url('fonts/ico1.woff?411a7m') format('woff'),
url('fonts/ico1.svg?411a7m#ico1') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: ico2;
src: url('fonts/ico2.eot?gz3b2b');
src: url('fonts/ico2.eot?gz3b2b#iefix') format('embedded-opentype'),
url('fonts/ico2.ttf?gz3b2b') format('truetype'),
url('fonts/ico2.woff?gz3b2b') format('woff'),
url('fonts/ico2.svg?gz3b2b#ico2') format('svg');
font-weight: normal;
font-style: normal;
}
i {
font-family: ico2, ico1 !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
If user generates multiple icon fonts with same content ("\e901") like below:
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
And uses this html file:
<i class="icon-comprehensive"></i> // First font icon (ico1)
<i class="icon-document-center"></i> // Second font icon (ico2)
Only the first one ("ico1") is applied for both of i tags. I think this issues related to
font-family: ico2, ico1 !important;
Is there any way to do it?
Thanks advance.
I found a solution for you.
i {
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon1{
font-family: ico1 !important;
}
.icon2{
font-family: ico2 !important;
}
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
And in HTML:
<i class="icon1 icon-comprehensive"></i> // First font icon with .icon1 class
<i class="icon2 icon-document-center"></i> // Second font icon with .icon2 class
I have downloaded some icons from icomoom but the icon background colours are black and white.I want to give my own colour.Can any body please tell me how to do?
When I downloaded the icon ,I got the following style.css
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-haa506');
src:url('fonts/icomoon.eot?#iefix-haa506') format('embedded-opentype'),
url('fonts/icomoon.woff?-haa506') format('woff'),
url('fonts/icomoon.ttf?-haa506') format('truetype'),
url('fonts/icomoon.svg?-haa506#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-home:before {
content: "\e600";
}
.icon-images:before {
content: "\e601";
}
.icon-pawn:before {
content: "\e602";
}
The icons should be treated as text.
If you apply a color to them. they will change their color.
Example:
.icon-pawn { color: red; }
I had to use the ::after pseudo element.
.icon-pawn::after { color: red; }
I'm not sure if this is peculiar to my project though, as I'm working on small changes to someone else's code.
This works for me:
.icon-color-success:before {
color: #28a745 !important;
}
and then:
<i class="icon-python icon-color-success"></i>
From the start I need to say that I know what I'm trying to do is not "the right way to do it", but the client I'm working for desperately wants THIS specific font.
So, I need to use on a client's website the exact font as VOGUE uses. So I took the .eot & .ttf and uploaded them on my server. Then I added the CSS definitions:
/*fonts fonts for IE*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/*fonts for other browsers*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And the CSS for my element is:
.post h1 {
display: block;
height: 100%;
font-family: VogueDidot;
font-size: 55px;
text-transform: uppercase;
overflow: hidden;
line-height: 58px;
}
And, normally, I expected to see everything working like a charm.
But it's not...
Here's how it should look like:
And that's how it looks on my website :
Any ideas?
Looks like the browser is trying to display the font bold and repeating the gray pixels (from the thin lines) next to each other. Try using font-weight: normal (The font-weight:bold is inherited from the h1 element).