Show off a font-awesome icon overlapping another image

Question

Show off a font-awesome icon overlapping another image

My task involves fetching image source from a JSON file and then displaying it on an HTML page.

https://i.sstatic.net/coOaU.png

I also need to overlay a Font Awesome icon on top of the image as shown below:

https://i.sstatic.net/nbrLk.png

https://i.sstatic.net/yYha7.png

However, when I tried to implement the code for this feature, I encountered an issue where the Font Awesome icon was not displaying properly.

html

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

script

$(document).ready(function() {
            var maskedImageUrla = "";
            var fontawesome = "<i class='fa fa-user-plus fa-2x'></i>";

            $.getJSON('test.json', function(json) {

              if (tl.src)
               {
                 maskedImageUrla = 'http://sitename.com/images/' + tl.src;
               }

                        var mask1 = $(".container").mask({
                            maskImageUrl: maskedImageUrla,
                            fontawesome: fontawesome,
                            onMaskImageCreate: function(img) {}
                        });
}); // end of document ready

Here is json file

Here is https://codepen.io/kidsdial/pen/bZNNXJ

Update: Code Snippet has been added below...

Your updated JS code snippet here

Your updated CSS code snippet here

Your updated HTML code snippet here

javascript jquery html css json

Answer 1

Answer №1

It appears that you have found the desired outcome

var mask1;
 
$(document).ready(function()
{
    var maskedImageUrla = "";
    var fontawesome = "<i class='fa fa-user-plus fa-2x'></i>";
    var coordinates = {
        x: 0,
        y: 0
    };
 
    var width = 0; var height = 0;
 
   var json = {
  "path" : " love shape\/",
  "info" : {
    "author" : "",
    "keywords" : "",
    "file" : "love shape", 
    // other properties...
    
  },
  "name" : "love shape",
  "layers" : [
    {
      // layer details...
      
    }
  ]
};
   
   
   
        for (let layer of json.layers)
        {
            // iterate through layers to extract necessary data
        }
 
        $(".container").css('width', width + "px").css('height', height + "px").addClass('temp');
 
        var mask1 = $(".container").mask({
            // set up mask properties and functionalities
        });
 
        // handle file upload change event
        fileupa1.onchange = function() {
            mask1.loadImage(URL.createObjectURL(fileupa1.files[0]));
        };
    
 
}); // end of document ready</answer1>
<exanswer1><div class="answer accepted" i="54898833" l="4.0" c="1551235656" a="TWFudSBKb3NlcGg=" ai="4213220">
<p>I trust this is the solution you have been searching for</p>

<p><div>
<div>
// other code snippets involving masks, CSS styling, jQuery, etc.

Answer 2

It appears that you have found the desired outcome

var mask1;
 
$(document).ready(function()
{
    var maskedImageUrla = "";
    var fontawesome = "<i class='fa fa-user-plus fa-2x'></i>";
    var coordinates = {
        x: 0,
        y: 0
    };
 
    var width = 0; var height = 0;
 
   var json = {
  "path" : " love shape\/",
  "info" : {
    "author" : "",
    "keywords" : "",
    "file" : "love shape", 
    // other properties...
    
  },
  "name" : "love shape",
  "layers" : [
    {
      // layer details...
      
    }
  ]
};
   
   
   
        for (let layer of json.layers)
        {
            // iterate through layers to extract necessary data
        }
 
        $(".container").css('width', width + "px").css('height', height + "px").addClass('temp');
 
        var mask1 = $(".container").mask({
            // set up mask properties and functionalities
        });
 
        // handle file upload change event
        fileupa1.onchange = function() {
            mask1.loadImage(URL.createObjectURL(fileupa1.files[0]));
        };
    
 
}); // end of document ready</answer1>
<exanswer1><div class="answer accepted" i="54898833" l="4.0" c="1551235656" a="TWFudSBKb3NlcGg=" ai="4213220">
<p>I trust this is the solution you have been searching for</p>

<p><div>
<div>
// other code snippets involving masks, CSS styling, jQuery, etc.

Show off a font-awesome icon overlapping another image

Answer №1

Similar questions

Tips for managing JavaScript within PHP code and vice versa

Attempting to adjust the width of a text animation loaded with jQuery using Textillate, but encountering difficulties

The jQuery fadeOut function modifies or erases the window hash

Cleaning incorrect JSON formatting in a Python script

Sanitize input data prior to using express-validator in a Node.js application

Is it a common issue for JSON/JQuery requests with a setTimeout to consistently return a "null" result when using the Twitter Search API?

Is there a way to achieve this design using bootstrap?

Modifying the jquery cookie's value

My SF2 app is experiencing issues with AngularJS integration

The current status of Dropzone.js is in a pending state, preventing the upload of any

Arranging a child element within a parent element by placing the child div on the right side of the parent div

Guidelines for callbacks and the impact on scope

What is the advantage of using event.target over directly referencing the element in eventListeners?

What is the best way to assign multiple values to certain elements within an array?

Struggling to send information using Angular $resource?

"Introducing a smooth animation effect to shift text alignment to the center

Is it possible to minify HTML in PHP without parsing JavaScript and CSS code?

Looking for assistance with aligning a form in the center?

The website is experiencing display issues when viewed on Internet Explorer 10 and above

Choose an image depending on the title, but only if a specific condition is met