How to render Fontawsome icon using CSS2D Renderer/Object


I want to render the map-marker-exclamation icon from the FontAwsome library above a three.js cube, but the icon is not rendered properly as you can see below!

Can you please tell me how can I render a FontAwsome Icon on three.js? thanks in advance.

var camera, scene, renderer;


 * draw cube
function drawCube(pos, scene) {
  const geometry = new THREE.BoxGeometry( 1, 1, 1 );
  const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  material.transparent = true;
  material.opacity = 0.2;
  const cube = new THREE.Mesh( geometry, material );

  const el = document.createElement('div')
  el.innerHTML = 'Hi <i class="fa-solid fa-user"</i>'
  const objectCSS = new THREE.CSS2DObject(el)
  objectCSS.position.set(pos.x, pos.y+1, pos.z)


 Create the scene, camera, renderer
function init() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x21252d);
  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(window.innerWidth, window.innerHeight);

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.x = 1;
  camera.position.y = 4;
  camera.position.z = 5;
  labelRenderer = new THREE.CSS2DRenderer();
  labelRenderer.setSize( window.innerWidth, window.innerHeight ); = 'absolute'; = '0px';
  document.body.appendChild( labelRenderer.domElement );

  controls = new THREE.OrbitControls(camera, labelRenderer.domElement);
  const cube_pos = new THREE.Vector3(1, 0, 2);
  drawCube(cube_pos, scene);

  window.addEventListener('resize', onWindowResize);


function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  renderer.setSize(window.innerWidth, window.innerHeight);
  labelRenderer.setSize( window.innerWidth, window.innerHeight );

function animate() {

function render() {
  renderer.render(scene, camera);
  labelRenderer.render( scene, camera );
<script src="[email protected]/build/three.min.js"></script>
<script src="[email protected]/examples/js/controls/OrbitControls.min.js"></script>
<script src="[email protected]/examples/js/renderers/CSS2DRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="">


The reason you’re not seeing the icon is that you’re importing your font-awesome CSS file as a <script>.

<script src=""></script>

But it’s not a script, it’s a stylesheet, and it needs to be imported as such:

<link rel="stylesheet" type="text/css" href="">

Answered By – Marquizzo

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published