I'm using an icon font and everything works so far as the icons show up in the interface as they should. I'm creating the file via Sass using the .scss format.
I noticed when I inspect an element to view it's CSS properties in the code inspector, or view the style sheet via the code inspector, or just open the .css file in my text editor, it shows the Unicode character of the icon glyph as follows:
.icon-alert::before {
content: "" !important;
}
What causes the little box with the question mark instead of what's actually written in the .scss file: \e669
How can I fix this?
I cannot mark this duplicate yet but there are existing posts around this topic. You have to create a function to workaround a known bug:
Sass: unicode escape is not preserved in .css file
https://github.com/sass/sass/issues/1395
Related
I have downloaded a simple template from the internet and for icons, the developer used Flaticons font. Now I want to put another icon on the website but I can't get Flaticons code for CSS file. On Flaticon site only can be downloaded in PSD, SVG, BASE 64 I don't have code like .flaticon-research:before { content: "\f100"; }. How to get that? Is there any solution to convert SVG file to get that content or how? I don't want to download every single SVG file and from the SVG file get the icon. I want to use the above example method. Any help will be welcome. Thanks all
follow the instruction here https://www.flaticon.com/iconfonts
after downloading the font you will see multiple files show you how to use your icons depending on you using css or scss
I am digging into an existing reactJS site, and many images are being rendered by using the css content property. I am looking at the css sheet in VSCode, and many classes are appearing with content listed as "". I'm not sure if I need a plugin to view the actual content, but I can't find a way to see it at this point.
I can use alter the content attribute to point to a different image, but want to know where this is being generated so I can alter it at the source. The site is setup to use Contentful, but assets there are called directly on pages, not in css.
.fa-discord:after {
content: "";
}
I'd like to be able to track down where this image is being stored or generated. Any help is appreciated!
That's a Font Awesome icon for Discord, and can be found here. Yes, you need to include Font Awesome on your website if you want to render any of their glyph icons. And you can easily work out whether a website is attempting to use Font Awesome glyph icons or not, as their selectors all start with fa- and replace the content.
Font Awesome icons are generated through an included CSS file, most commonly located in a folder like /fonts/font-awesome/css/font-awesome.min.css.
This file uses unicode characters to generate the corresponding glyph representations, and the specific unicode character for the Discord icon is 392. Thus, content: "\f392" will render the relevant glyph icon.
If a box or square shows up instead of an actual glyph, that means that the font you're using doesn't incorporate that particular unicode glyph. Font Awesome rapidly expands its coverage of unicode glyphs, and you will need to update to at least Font Awesome 5.0.0 in order to use the Discord glyph.
I started using Atom today. It's great, but I have a couple of issues:
Syntax Themes: I installed some syntax themes, but I found one cannot modify editor font colors, just style and size (from the main settings pane). Is there any workaround?
Markdown Preview: I was unable to find out how to change preview style.
I mean, markdown is rendered with arial fonts and a white background.
Is there any way to change this default behaviour?
You should be able to customize both in your user stylesheet. On Mac OS X, you can open this using Atom > Open Your Stylesheet, which will open the ~/.atom/styles.less file.
For the syntax themes: You can customize the colors in your styles.less file, simply take a look at the theme's source LESS file and then override the settings in your custom stylesheet. More details and an example can be found here.
Markdown Preview: The Markdown Preview package has an example on how to do that in your own styles.less file:
.markdown-preview.markdown-preview {
background-color: #444;
}
Take a look at the Markdown LESS files to see some of the styles you could override:
Default style: https://github.com/atom/markdown-preview/blob/master/styles%2Fmarkdown-preview-default.less
GitHub style: https://github.com/atom/markdown-preview/blob/master/styles%2Fmarkdown-preview-github.less
The markdown-preview-plus documentation now gives a different approach to styling the preview (even from the "snippet" provided in their README"):
To target Markdown-Preview-Plus rendering in general, you can do something like this in your stylesheet:
html[data-markdown-preview-plus-context] body {
/* styles that affect mpp preview */
}
Full details (especially on further "contexts") in the MPP docs.
I've been looking for an answer for 3 days straight now (i did sleep a few hours though).
I'm using a wordpress theme that integrates font awesome icons smoothly. But i wanted to alter these icons and use my own, but they won't show in Firefox but do show in Safari, Chrome etc.
I'm using this css code to alter the icon to my own icons:
.fa-euro:before {content:url(http://nip10.nl/xtra-icons/icon-2.png);}
.fa-glass:before {content:url(http://nip10.nl/xtra-icons/icon-1.png);}
.fa-bell:before {content:url(http://nip10.nl/xtra-icons/icon-3.png);}
.fa-coffee:before {content:url(http://nip10.nl/xtra-icons/icon-4.png);}
You can see the website here: www.nip10.nl
Hope someone can tell me how i can alter the css code so the icons also show in FireFox.. I've tried anything from naming images to .jpg files etc. etc..
You should validate your HTML. See here: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nip10.nl
I'm going to guess that the problem is that firefox is running into this error
Line 1069, Column 26: Element style not allowed as child of element
div in this context. (Suppressing further errors from this subtree.)
And failing to parse the embedded style sheet. You should also not embed your large stylesheets like that. Make them external style sheets. Once that's done, find where your HTML error is that's causing the validator to think you don't have the style sheet in the head tag and it should fix itself.
I love working with Codepen and I'm trying to import a css file from Pastebin.
Here is a link to my external file hosted on Pastebin:
http://pastebin.com/raw.php?i=mj9dmzZw
and inside that file I link to my actual font files.
I'm not sure what I'm doing wrong. Could anyone point me in the right direction or let me know if this is even possible.
Here is the actual codepen. http://codepen.io/ryanjgill/pen/CLitH
Inside the CSS section I have commented out the styling that I'm trying to include with the external CSS file. If you uncomment the styling for the iconfonts, you will see icons in the column 'Type'.
I have tried linking the flie in the settings of the css section that is built into codepen. And using the "#include url('http://pastebin.com/raw.php?i=mj9dmzZw')" inside the css.
Well, on CodePen page, there is a small letter 'g' top-right of css input box.
You can import your .css there i think.
If you need some .css extension to your file for importation, just create a new file.css and #import your Pastebin css from within your new file.css