0

I have a .svg file containing a vector image of WhatsApp logo.

The file is available here in Wikimedia Commons and from what I can tell it's free to use.

I want to paste it as text in my website as a comfortable way to combine in HTML documents without storing an image file and without referencing to it and maintaining the image path in the HTML code.

How to make, from that vector icon, a Unicode-standardized textual character (preferably UTF-8)?

A WhatsApp character that would be similar to these:

  • ☎
  • 📞
  • ✆
  • 📱

Is there any function common in graphic design programs which does so automatically, somehow?

Improve this question
6
  • I'm not sure exactly what you are trying to achieve here. Maybe I misunderstand, but since Unicode is a standard you can't just add characters yourself. Then it wouldn't be a standard. If you made a custom font or a custom version of a font which contains that logo, you would have to instead maintain the font path in the HTML code so I can't see how that would be easier. Linking to an image is a completely normal thing to do. If you for some reason want to avoid this you could have the SVG code inline instead of linking to a file. But then the SVG code must be present in all your HTML files.
    – Wolff
    Feb 6, 2022 at 13:42
  • @Wolff thanks a lot, I just want a textual character to work with, which modern browsers (Chrome, Edge, FireFox) would easily recognize, instead of an image.
    – JohnsonTarof
    Feb 6, 2022 at 13:53
  • @Wolff coding the SVG inside the HTML is an action I find interesting, although it would likely create an astonishingly broad row of input ... Perhaps I should call the svg file from Wiki Commons directly, instead from my server :)
    – JohnsonTarof
    Feb 6, 2022 at 13:54
  • You could of course link to Wikimedia Commons. Comes with a minor risk of course. The file might be removed or change path. The site could be down. I don't understand the reluctance to link to a file on your server. Doesn't your site contain other graphics and images?
    – Wolff
    Feb 6, 2022 at 13:59
  • @Wolff I normally would store a free file and link to its local version as with src="/.file.svg" or src="/file.svg" but I had a strange problem in which only src="https://domain.tld/rest_of_the_path" worked, perhaps due to some unreported JS bug or a local content-management-system bug which I couldn't debug and yet didn't want a full link. I count on MediaWiki's server in this particular special case.
    – JohnsonTarof
    Feb 6, 2022 at 14:09

1 Answer 1

Reset to default
1

If I understand correctly, what you're trying to do is have a Unicode character such as U+2706 (✆) represented by a specific vector image (e.g., the WhatsApp icon) in all your web pages.

What you need to do is create your own font that contains this image at the corresponding code point. Perhaps the easiest way to do this is by using the IcoMoon App. Select the WhatsApp icon and click the "Font" button:

Screenshot of the IcoMoon website with the WhatsApp icon selected

On the next page, paste the character you want to associate with this glyph, or just type in the corresponding code point (2706), then click the "Download" button:

Screenshot of the next page, showing how to specify the code point for this glyph

You'll then receive a set of files that you can use to embed this font into your web pages. Put this font at the start of the list in your font-family CSS rules (e.g., body { font-family: icomon, Arial, sans-serif; }). Any characters missing from the first font (i.e., everything except ✆) will be displayed using fonts that appear later in the list.

You can of course add other icons to your font if you like. IcoMoon's documentation pages explain the process in more detail.

Improve this answer
9
  • Hello, thanks ! I ought to just copy and paste a character which was created "in-vivo" out of a program. I give the program the svg icon as input and get a character to copy-paste as output (and it would be recognized by all major webbrowsers). I understand that what you suggest is a bit different and requires CSS, or that such technology (as I seek) currently doesn't exist.
    – JohnsonTarof
    Feb 7, 2022 at 13:49
  • @JohnsonTarof, where would the vector data be stored in your scenario?
    – Wolff
    Feb 7, 2022 at 15:40
  • @Wolff I don't know if the character itself is a vector, are characters vectors?...
    – JohnsonTarof
    Feb 7, 2022 at 16:19
  • @JohnsonTarof, yes! The vector data is saved in the font file. So the only way a user can display the letters or symbols from a font is if they have it installed or if you provide it via CSS rules. That is what I meant with my initial comment. There is no way you can draw custom graphics on a users screen which doesn't involve the user downloading the data.
    – Wolff
    Feb 7, 2022 at 16:43
  • @Wolff ------ unless if the browser itself contains these graphics (such as all Unicode characters) right? Well, bummer... Maybe I should tried writing a suggestion to Unicode organization and meanwhile use the image...
    – JohnsonTarof
    Feb 7, 2022 at 17:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.