What is the best way to align a Font Awesome icon within an SVG circle?

Can anyone help me position the trophy inside the circle, just below the number 2000?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7974746f686f697a6b5b2e35283529">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<div class="text-center content-align-items">
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke-width="4" style="opacity: 0.8;stroke: rgb(76, 182, 172);fill:white"/>
    <text fill="#000000" font-size="18" font-family="Verdana" text-anchor="middle" alignment-baseline="center">
       <tspan x="50" y="55">20000 <i class="fa fa-trophy"></i></tspan>
    </text>
  </svg>
</div>

https://jsfiddle.net/owc4kmLv/

htmlcssbootstrap-5font-awesome

Answer №1

The issue in your code arises from the fact that <i> is not supported within SVG, causing the browser to place it outside of the <svg> element.
One solution would be to utilize another <tspan> along with the corresponding HTML entity &#xf091;:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="text-center content-align-items">
  <svg height="100" width="100">
        <circle cx="50" cy="50" r="40" stroke-width="4" style="opacity: 0.8;stroke: rgb(76, 182, 172);fill:white"/>
        <text fill="#000000" font-size="18" font-family="Verdana" text-anchor="middle" alignment-baseline="center">
            <tspan x="50" y="55">20000</tspan>
            <tspan x="50" y="75" class="fa">&#xf091;</tspan>
        </text>
    </svg>


</div>

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

Updating events instantly with a single click in Angular 6: A step-by-step guide

Hello there, I am currently diving into learning Angular 6 and I have encountered a query. I want to achieve a functionality where upon clicking a button, the text on the button changes as well as the corresponding event that triggers when the button is cl ...

angularhtmltypescript

Ensure the HTML table's <td> cell width automatically adjusts to accommodate the image, regardless of its dimensions

Has anyone encountered a strange issue while building an HTML table for an HTML email? Whenever I insert an image into a <td>, it causes the cell to expand to its maximum width, affecting all the columns to the right by resizing them to their minimum ...

htmlcsshtml-table

The strategy of magnifying and shrinking graphs on Google Finance for better analysis and

I am seeking to understand the logic behind a zoom-able graph similar to the one on Google Finance. I am aware that there are pre-made components available, but I am interested in a simple example that breaks down the underlying logic. ...

javascripthtmlcssajax

Is there a way to dynamically import several CSS files in React Native depending on the data stored in this.state?

How can I dynamically import multiple CSS files in a React Native project based on language? import React, { Component } from "react"; if(this.state.language === "he"){ import styles from "./he"; }else{ import styles from "./en"; } I attempted the ab ...

cssreact-native

How can I make the arrows work on a secondary slider with EasySlider1.7?

I finally managed to get 2 sliders working on my page after reading through several other tutorials. However, I am facing an issue with the Prev & Next arrows on the second slider as they don't seem to work properly. I inherited this page from someon ...

javascriptjqueryhtmlcsseasyslider

Combining various functions into a single button

I am currently working on creating a full-screen menu that functions like a modal. Everything seems to be working fine, except for the fadeOut animation. Can someone please help me understand what is causing issues with my scripts/codes? I want the content ...

javascripthtmlcssanimation

Why is there a thin line still visible on the other sides when a transparent background is used, but only on mobile devices, with a curved border on one side?

Recently, I've delved into the world of creating CSS art and stumbled upon a peculiar issue with CSS borders that has left me puzzled. When I apply a border to only one side of an element with a transparent background and rounded edges, I notice a fa ...

css

The functionality of HTML5 Camera is experiencing issues while being used with Tomcat7

My Angular2 project includes HTML5 camera access functionality. I launch the project using Angular CLI (ng serve), which starts the web container for testing purposes. When trying to access the camera, the browser prompts me for permission. Once granted, e ...

javascripthtmlcamera

The Quirks of jQuery's .load() Method

On my website, I am incorporating a basic jQuery script to load content from one part of a webpage into the 'display container' on the same page. The content being loaded consists of multiple divs enclosed within an outer <div> that is hid ...

javascriptjqueryhtmlcssajax

CSS hover effect applied uniformly to all link children

Here is the HTML code snippet I am working with: <a href="">Bioshock 2<span> - Xbox 360 review</span></a> My goal is to style the first part of the link differently from the span. The desired styling should look like this: https: ...

css

Exploring Cypress techniques for testing the HTML5 intrinsic validation popup

Is there a way to detect an HTML5 built-in popup validation error while testing an app with Cypress? It seems that this error does not appear in the DOM, making it challenging to capture using a cy command (I am utilizing testing-library). https://i.sstat ...

htmlvalidationtestingcypressreact-hook-form

Discover the size of an image using JavaScript by accessing innerHTML

I'm currently working on a unique AJAX function that retrieves image URLs without using node append for insertion. Instead, I opted to utilize innerHTML, but this has posed challenges in accurately obtaining the file dimensions. My current approach i ...

javascripthtmlajax

Troubleshooting Alignment Problem of Maximize and Close Icons in RadWindow Using ASP.Net

Currently, I am utilizing telerik radwindow to showcase a PDF document. The window seems to be functioning correctly, but there is an issue with the alignment of the maximize and close icons. Ideally, they should appear in the same row, however, they are b ...

c#cssasp.nettelerikradwindow

What is the most effective method for converting this flash application into a format that is compatible with

I have a unique flash animation that I want to make compatible with iPhones by integrating it into an iPhone app. Unfortunately, I cannot provide a direct link to the animation, but you can view a screenshot of the interface here. This interactive animat ...

iphoneioshtmlflashcanvas

Adding a command to open a new browser tab using JavaScript code can easily be accomplished by following these steps. By using Terminal, you can quickly and efficiently implement this feature

I'm new to coding and trying to create a terminal simulation. You can check out my code here: https://codepen.io/isdampe/pen/YpgOYr. Command: var coreCmds = { "clear": clear }; Answer (to clear the screen): function clear(argv, argc ...

javascripthtmlcss

Implement a function that allows users to input a pin code digit by digit using a single HTML input

I am working on an application that requires users to input an SMS code for login. Below is a simplified example of what I need. For better accessibility, I want the SMS code input to be just one <input> in the HTML. I would also like to eliminate t ...

htmlcssreactjswebmaterial-ui

Switch from scrolling the entire page to scrolling within a single div

Whenever I click on an element on my webpage, a modal window with a fixed position appears. The issue I am facing is that when I scroll using the mouse or touch gestures on my phone or tablet, the entire page scrolls instead of just the content within the ...

jqueryhtmlcssscroll

Encountering an undefined variable error with Ruby on Rails 6 Bootstrap after restarting the server

I'm facing an issue in rails 6 where upon server restart, I encounter an Error: Undefined variable. Oddly enough, if I comment out the SCSS variables in my files, refresh the page, then un-comment them and refresh again, everything works as expected a ...

cssruby-on-railsrubybootstrap-4

Tips for adjusting the thickness of the next/prev icons in the Bootstrap carousel

Exploring the world of HTML/CSS and Bootstrap. There's a carousel with these previous/next buttons : <button class="carousel-control-prev" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="prev ...

htmlcssbootstrap-5

Ways to show buttons as inline or block elements when a single button is enclosed within a form

Need help figuring out how to make two buttons display as block elements on small screens and inline elements on larger screens, especially when one button is wrapped inside a form? I am struggling with displaying two buttons on my page. One of the button ...

csstwitter-bootstrapresponsive-designbootstrap-4