I have this issue, I have a font-set without documentation (icons as a font). I want to use them but I have to somehow know what are specific codes for particular symbols. Is there a way how can I retrieve it?
For example to use it as in the below example:
.icon-box {
&:before {
content: "\e088";
}
}
EDIT
We have the following files: *.eot / *.svg / *.ttf / *.woff
When you have an icon font without documentation, you can
Create an HTML document containing a suitable range of characters, with font set to the icon font. Typically, icon fonts use either a Private Use range like U+E000...U+E0FF or U+F000... or the Latin1 range U+0000...U+00FF. You may need to try different ranges.
Use a font inspector, such as OTM Light (free), provided that it can handle the font format you have.
Related
In InDesign I use the Google Font Kadwa to generate a right arrow (→).
I load the font into my website but the arrow is too wide.
#import url('https://fonts.googleapis.com/css?family=Kadwa');
body {
font-family: 'Kadwa';
}
You see, the font is applied but the arrow is too wide →
On the Google Font page the arrow is rendered correctly.
https://fonts.google.com/specimen/Kadwa?selection.family=Kadwa
I dont get it, what I am doing wrong.
Would be nice if somebody has a solution for that.
It looks like that character is not being loaded with the font for some reason. You can actually force Google fonts to load a particular character or set of characters by including a text parameter in the request. (The characters must be url encoded.)
I've added an additional font request below that loads a font with only the arrow character. This supplements the Kadwa font that's already been loaded, and everything shows up correctly.
I've also converted the arrow character to an HTML entity (→).
#import url('https://fonts.googleapis.com/css?family=Kadwa');
#import url('https://fonts.googleapis.com/css?family=Kadwa&text=%E2%86%92');
body {
font-family: "Kadwa";
}
This should have the correct arrow →
Related:
Code styling for black and white documents
I want to use a simple custom CSS for code highlighting in knitted .Rnw/.tex/.pdf documents. However only a select few rules seem to be implemented upon knitting.
For the moment I am focusing on colorless highlighting, consequently I would like to manipulate rules such as text-decoration, font-weight, font-style and - for grays - color; cf. the theme "print" here. But, even with the simplest examples, I can only get a certain few to be implemented, e.g., color and font-style; specifically, I've found that font-weight does nothing, nor does text-decoration. E.g.:
.background {
color:#F6F6F6;
}
...
.kwc {/* e.g., parameters */
font-weight:100;
color:#8C8C8C;
}
.kwd {/* e.g., methods */
text-decoration:underline;
}
...
.com {/* comments */
font-style:italic;
}
...
(The sets of three dots indicate that my CSS file contains more than the example above.)
With the above in my style sheet, in the output PDF the code block background and parameters are colored accordingly and the comments italicized, however the parameters do not have a font weight of 100 nor are methods underlined.
Is there some sort of limitation as to the rules custom knitr themes may use? What else may be the problem here?
N.B.:
Mac 10.9.3
knitr v1.6.3.
I have the CSS in the same directory as my Rnw document and I pass it to knitr in a chunk at the beginning of my document via:
theme <- knit_theme$get('./my_css.css')
knit_theme$set(theme)
I'm searching for the correct style to configure CopySourceAsHtml to change my Selenitic style to default Visual Studio style when I copy and paste it to e.g. an e-mail. Does anybody know what CSS style(s) I need to use to set it up correctly?
When I copy & paste source code an e-mail I get a dark background. If I set it to white it will show all text in light colours which are hard to read. So I need to change the complete style.
How does your plugin expect the CSS to look like? If you open the theme I referred to in the comments above in a text editor you'll see a lot of lines like this:
<Item Name="outlining.collapsehintadornment" Foreground="0x00E8DDD7" Background="0x00FAF7F6" BoldFont="No"/>
Now since I don't know how exactly your plugin is expecting the CSS I will go ahead and give an example of what this might look like in CSS:
.outlining-collapsehintadornment
{
color: #D7DDE8;
background-color: #F6F7FA;
}
Or:
<Item Name="String" Foreground="0x001515A3" Background="0x02000000" BoldFont="No"/>
Becomes
.String
{
color: #A31515;
background-color: #000000;
}
How did I get this?
Visual Studio settings file save color codes as "code hex" values. And they use BGR instead of RGB. This means that you can convert this VS color hexes very simple to HTML color hexes. And since HTML uses RGB don't forget to invert the code. So for example:
0x00E8DDD7. Replace the 0x00 (sometimes this may be 0x02) with a #. And then swap the first 2 and the last 2 characters (BGR to RGB). So you get #E8DDD7 = #D7DDE8. And of course "Foreground" is text-color and "Background" is background-color...If your plugin supports it you might even consider to write font-size: bold if you see BoldFont="Yes" in your XML.
Summarized: Open the VSSettings file I referred to in my comment above in a texteditor. Then convert everything to CSS. Write a simple program to do this, or do it by hand, whatever you prefer. Just remember that this is just an example of what it might look like. I don't know what "CopySourceAsHtml" is expecting your CSS to look like.
Some insights into the decision would be appreciated. I have a hard time finding the reasons why this is specified in the CSS design.
First of all, all URL/URI resources are notated with url(). Second, how do you want to differ between a standard value like none or inherit and images none/inherit?
For example you could create an image called none, send its MIME type correctly and then use
background-image: none;
What should be used now? The stored file? Or the value called none? Another example are cursor files. You could name your cursor file pointer:
cursor: pointer;
To avoid this ambiguity you use url() to denote URIs/URLs. Then it's absolutely clear what to use and you can name the graphics/resources however you want:
background-image: url(none);
cursor: url(pointer);
I suspect they already foresaw the need to have other background images than URL-based ones. linear-gradient for instance.
Also, since image files do not have to have a file name extension, it would be difficult to distinguish the image file from the other properties in the background shorthand method
What is the difference between these 2 selectors a[type="application/pdf"] and a[href$=".pdf"]
a[type="application/pdf"] {
background-image: url(/images/pdf.gif);
padding-left: 20px;
}
a[href$=".pdf"] {
background-image: url(/images/pdf.gif);
padding-left: 20px;
}
The accepted answer isn't completely correct. No selector does "MIME type matching".
a[type="application/pdf"] will match all links where the "type" attribute is set to "application/pdf". If you want to display a PDF icon you'll need to add type="application/pdf" to all the approprite links.
This is exactly what the type attribute on links is intended for (see the spec), to provide a "hint" to the MIME type. However, the browser doesn't actually know what the type of a file is until it starts downloading it. Just wanted to clear that up.
The other selector, a[href$=".pdf"], matches the URL of the link only. It will match any links that end in .pdf, whether they are actually PDF files or not. And of course, it won't match URLs like file.pdf?v=2.
Your best bet is to mark all links to PDF files manually, either with the type attribute, or since you want IE-compatibility, just a regular class instead.
One does MIME type matching and the other does extension globbing. You should probably use the first one because not everyone uses file extensions.