Embed a symbol from a custom font - html

maybe this question is too easy, but I couldn´t find anything helpful.
I know how to define a custom font in a CSS file by #font-face.
What I don´t know is how I can find out which code I have to use to display a certain symbol.
To make my request clearer I can give you a simple example:
How can I display the second snoopy icon from this font on a webpage?
http://de.fontriver.com/font/snoopy_dings/
And how do you find out the code for a certain symbol?
Thank you for your efforts,
Robert

First of all you need to find out the relevant letter that maps to your symbol. for that download that font and install it to your computer, open up a word processor and use insert symbol feature. So you can find the relevant English letter. Lets say it is "L".
Then you just type L in HTML and set the font through CSS.
for your problem, it is "B" so to display the second snoopy icon from this font on a web page you need code below.
HTML
<span class="snoopy">B</span>
CSS
.snoopy{
font-family: "Snoopy Dings";
}

I guess your symbol is a letter, but the font is so weird that it doesn't look like a letter. Use you font and try to write the B letter. It should be your Snoopy icon.

Unless you have a alphabetic chart there's no easy way to find out what icon is linked to what other letter. The easiest solution is to just type out the letters in that font and see what pops up.
There's actually an option in the site to try each letter (under Probefahrt). That gives you an input in a normal font and outcome in the custom font.

Related

Little icon images added to span class inside <li> tags?

Does anyone know how this is being done? They have different icon imagery in each list, but I am not able to find any code associated with this, no icon styling, and when I look at the source code, it just shows the little icons there as well.
I wanted to duplicate it, but just not sure how this is being done:
https://www.happyhydro.com/products/happy-hydro-5-x-15-trellis-netting-with-3-zip-ties
Thanks in advance,
Todd
😳 and so are, like a and %, are just characters (hence why they show up in the source code: They are source code). Your OS may provide a convenient mechanism for inserting them or you can copy/paste them from a character list.
They're emojis added to the text of the span. For example, the first one: https://emojipedia.org/seedling/

A font with all the characters the same

I'm looking for a font which displays a  or a * for every character, in the same way. A totally unreadable font.
Despite my efforts I couldn't find one on the internet. Is there a system font like this ? Or do you know one ?
As I doubt that such a font exists, an alternative could be to do your own select. Using the data-* attribute provided by HTML5, you can attach any additional information to any element. So, you can develop a select that would display the character you want (e.g. *) but set data-something to the correct value. Then, when the user press on a button or so, you can call a function to iterate through your personal selects and read the data-something from them to compute the data the user entered.
Here is a minimal example of such a code : https://jsfiddle.net/w0za8ut6/2/
Make one. Just fire up FontForge, the authoritative open source font editor of choice, and make a font with your desired glyph pasted into every letter box that you need supported, or you can craft a cmap 13 font with a single glyph but defined as used for the entire code range, like Adobe's "Blank" font.
Generate your font, pick "web open font" format to make it a WOFF2 instead of a system font like ttf/otf, and done. You can now load it with an #font-face rule.
That said, what you want to do sounds like a weird hack that doesn't actually make passwords any more or less secure, but that's your decision.
The font part at least is almost trivially easy.

Listing the Icons/Glyphs used with a font and "content:'\value'"

I am editing a pre-existing site that makes use of icons/glyphs in a multitude of files like eot, svg, w0ff, ttf (I guess for various compatibility). It calls these with the use of the font and a CSS value like this:
font-family: icons_filename;
content: "\e601";
So how would I find a list of the different values of the icons called with "content"?
In other words, I am trying to see what is possible in an undocumented library of icons that don't necessarily have a good list of names.
I also don't understand how the value "\e601" is used or how to look that up in a file. This part of CSS is unfamiliar to me and I cannot find a good explanation for this as most icon tutorials only show how to use a documented library.
Thanks
I believe you're looking for UTF-8 characters. Icon fonts generally override the default font on this universal icon font if they exist. Here's a link to where you can view them.
Adding onto what Chris already said, you should be able to track down which font icon library your template/theme is utilizing. One of the most common examples of these would be Font Awesome.
From the link above, you'll have the ability to go through each icon and figure out which "unicode" to select. For example, "fa-blind" (blind man walking icon) has a unicode of "f29d", which translates to "\f29d" when using it for the CSS property "content"
If your stylesheet is served in UTF-8, you can avoid the need for unicodes (f29d in our example), and directly copy/paste the icon should it be listed on a site for you (i.e, instead of "\f29d" in the content, it'll be the actual fa-blind icon glyph. It'll show up as a blank square in your CSS document, but will render properly when you're on the webpage.)
I might've gone on too long here, but ultimately what you need to do is figure out which library of icons the site is utilizing. We could easily figure it out for you if a link is provided.

fix font size on a website globally

I m using CKEditor for a simple CMS i built for a client.
Here s the problem I m having, client copies and pastes text from a word document, and this text is stored to database with the current font that was in the text. and on the front end it shows different font from the rest of page.
How can i enforce a fix font for a page?
I have a font defined globally in css but fonts can be overriden in different divs p, span etc. right?
I thought of removing fonts from CKEditor.
Looking for a neat solution.
cheers.
Word makes a real mess of any text that it pastes, with all kinds of extraneous tags in it.
The easiest for you is to educate your client about the paste from Word button.
If you really want this enforced, you can always set forcePasteAsPlainText to true.
You can add a listener for the "paste" event. It will clean up your HTML the way you want.

Rendering barcodes in HTML with Code 128 font

Is it possible to render correct bar-codes in HTML using the Code 128 font?
The main content of the bar-code is fine in the broswer (firefox) but when I try to add the start code character I just get this character in the browser:
Ñ
This is ASCII code 209. I'm wondering if it even has a bar representation.
I'm using MVC but this is really just a HTML/CSS problem I think.
Thanks
This isn't quite what you asked for, but you can make barcodes using CSS: see http://unixshell.jcomeau.com/src/barcodes/memberships.html. I'm using code39 for this, but most other linear codes can be done the same way.
Are you sure that the client is going to have barcode font installed?
Server side image generation seems to be a better solution.
You may want to try Barcode.dll for barcode rendering.
It includes ASP.NET barcode control - just drag & drop.
Please note that this is a commercial product I developed.
I know this is years too late, but looking again at the question, I'm pretty sure you're just not using the right numeric code for your font. there is no single "Code 128 font". while 209 is shown by Wikipedia to be the correct "common" code for Start B, in various fonts I found online this is not the case. in this, Start B is 236; and here it's 204. use the right code for your particular font, and you should get what you want.
a code point not encoded by the barcode font will be rendered by a default font, which is why you're seeting the N tilde character.