Why do the fontawesome icons fail to appear in my SVG file?

I've encountered a peculiar issue where icons (from fontawesome) are not appearing in my svg. They have always displayed correctly on my personal computer, so for a while I didn't realize that others were having trouble seeing them.

For instance, if you check out the first svg image in this post:

Where there should be stick figures and other icons like these below instead of red and green "SELL" and BUY" words with prices and boxes: https://i.sstatic.net/6t9cr.png

One of the icons that's missing looks like this:

In the css file, I'm including the necessary fontawesome styles. In the svg code, I'm using the appropriate Unicode character. In fact, the large \uf183 that appears in the first image is me attempting to manually enter the Unicode rather than copying and pasting the character.

Any insights into what mistake I might be making here? I'm not a seasoned web developer and I made these images to make a point, but now I find myself spending more time trying to get the icons to display than focusing on the actual content itself.

htmlcsssvgfont-awesome

Answer №1

Your SVG file is being imported as an <img> and it is not aware of the FontAwesome CSS file linked in your HTML code.

To resolve this issue, you will need to include the FontAwesome CSS file within your SVG file as well.

However, it's a bit more complex because the SVG is included as an <img>, which has browser restrictions that prevent it from referencing external resources. It needs to be self-contained.

The solution is to embed the FontAwesome TTF font as a Data URI within a <style> element in your SVG file like so:

<svg width="500" height="200" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 500 200">  
  <defs>
    <style type="text/css">
      @font-face {
        font-family: 'FontAwesome';
        src: url(data:font/opentype;base64,[...]) format('opentype');
      }
    </style>
    ...etc...

For more information, check out: use FontAwesome icon in svg without external files

Answer №2

Connect Font Awesome via the internet to your upcoming project and experiment with it...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing JavaScript to trigger the :hover pseudo-class and implement event transfers

Consider this situation: You have a scenario where two images are stacked on top of each other. The image with the highest z-index is transparent and handles click events, similar to Google's Map API, while the image below is for visual representatio ...

javascripthtmlcssdom

Alter the color scheme using jQuery

Exploring the world of websites, I've come across many with a unique color switch feature. Users have the ability to choose a color, and the entire page transforms to match their selection. Check out these links for some examples... http://csmthe ...

javascriptjquerycssplugins

Custom Jquery function is failing to position divs correctly within ajax-loaded content

I recently coded a custom function that efficiently positions absolute divs within a container by calculating top positions and heights: $.fn.gridB = function() { var o = $(this); //UPDATED from var o = $(this[0]); o.each(function() { var ...

jquerycssajaxcallbackpositioning

How can I make a clickable button or link within an anchor tag that is still able to be right-clicked?

Hey there, I'm currently working on a notification dropdown menu where each <li> contains a link or an <a> tag. I'm aiming to create something similar to Facebook's notification system. However, the challenge lies in trying to ...

javascriptcsstwitter-bootstrap-3drop-down-menuanchor

Tips for concealing scrollbar track without the use of overflow

Issue with Mystery Scrollbar A strange phenomenon is occurring on all pages every time the user reloads - a mysterious scrollbar track appears out of nowhere. Initially, there is no sign of this scrollbar track, making it even more puzzling. Despite the ...

cssreactjsnext.jstailwind-cssstyled-components

Eliminate the hover effect from every element

Is there a method in CSS or Javascript that allows me to eliminate the hover effect on all elements? I am specifically looking for a solution that will disable the hover effect on mobile devices while keeping it intact on desktop. I attempted using pointer ...

javascripthtmlcss

Using requestAnimationFrame to animate several independent objects

I'm currently working on animating two different objects: a square and a circle. Each object has its own button to initiate the animation, which involves moving the object from left to right. However, I've run into an issue where clicking on one ...

javascriptjqueryhtmlcssrequestanimationframe

Align an image in the middle with a heading

I am currently working on aligning a picture and heading in a header section. My goal is to center both elements, with the picture being twice as tall as the heading. So far, I have them stacked one above the other: .body { font: 15px/1.5 Arial, Helveti ...

htmlcss

Avoiding Ajax overload/server collapse in an Arduino/ESP8266 setting

I've recently been delving into Arduino programming to host an HTML/CSS/JavaScript webpage on an Adafruit HUZZAH ESP8266 breakout board. Please pardon any unconventional methods I may be using. My approach involves utilizing Ajax to update pressure g ...

javascriptcssajaxarduinoesp8266

Three Divs stacked on top of each other, with varying heights based on

I am seeking a solution for creating a layout with three vertically stacked divs. The top div must have a fixed height of 60px. The middle div might contain content exceeding its height, therefore we've set it to overflow: auto. But regardless of th ...

javascriptjqueryhtmlcss

Creating a unique carousel design using only CSS in Bootstrap

Trying to create a CSS effect to enhance Bootstrap, I noticed that it only works correctly when clicking the right arrow. Whenever I click the left one, nothing happens. I'm not sure where I made a mistake, can anyone help me spot it? Thanks in advanc ...

csstwitter-bootstrap

Interacting with a span button within the parent element using its specific id with Selenium and Java

Can I click on a span button nested within a div element and use the input's id to ensure test stability? HTML: <div class="idit-go"> <input id="IDITForm@checkRuleVO" class="GoLong align-left idit-go-text" type="text" value="" title="Valida ...

javahtmlseleniumxpath

Unlock the secrets of programming with the must-have guide to mastering variables

As a newcomer to the world of programming, I may be jumping ahead by asking this question too quickly. While reading a book, I came across something that confused me. Why is it necessary to create a variable for the password box element? Wouldn't the ...

javascripthtml

Having trouble with your website not adjusting properly when resizing the browser or viewing it on a mobile phone

My website is not adapting properly to different screen sizes, even after I have added the META tags below. Any advice would be appreciated. Thank you. HTML <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8> ...

htmlcssmeta

Slide the first div upward to display the text in the second div when hovering over the first div

I'm facing an issue where a div needs to move upwards when hovering over it. To see an example, take a look at this JSfiddle. The desired outcome is as follows: As illustrated, the right div is the one being hovered. I have attempted to create this ...

htmlcss

Passing dynamic scope from Angular to a directive is a seamless process

I am working with a directive that retrieves an attribute value from an http call in the following manner: Controller app.controller("HomeController", function($scope){ $http.get("/api/source").then(function(res){ $scope.info = res.data }); }); ...

javascripthtmlangularjs

I'm trying to create a horizontal list using ng-repeat but something isn't quite right. Can anyone help me figure out

Feeling a bit lost after staring at this code for what seems like an eternity. I'm trying to create a horizontal list of 2 image thumbnails within a modal using Angular's ng-repeat. Here's the HTML snippet: <div class="modal-body"> ...

javascripthtmlcssangularjsangularjs-ng-repeat

The functionality of the button is affected when it is placed on the same line as a h1 heading

My goal is to have the page title and profile button aligned on the same line in the header of each page. However, I've encountered an issue where the button doesn't function properly when placed on the same line but works fine when separated ont ...

javascripthtmlcssreactjsweb-applications

Conceal the scrollbar track while displaying the scrollbar thumb

Hey there! I'm looking to customize my scroll bar to have a hidden track like this. Everyone's got their own style, right? ::-webkit-scrollbar{ width: 15px; height: 40px; } ::-webkit-scrollbar-thumb{ background-color: #DBDBDB; borde ...

htmlcssscrollbar

Could it be that v-show does not function properly on elements that are not dynamic

I'm not experienced in web development and this is my first attempt at using a web framework. The framework I am currently learning is vue.js version 3. My goal: I want to create 4 app instances (nav, defaultApp, bootstrapApp, vueApp). When I select ...

javascripthtmlvue.js