Utilizing Font Awesome icons within a JSON structure

I'm running into a bit of trouble trying to display font awesome icons. The text is written in json using a rakefile, and I'm attempting to insert a font awesome icon within the text. However, I'm facing difficulties because the text is in json format. Can someone please take a quick look and assist me with this issue? The icon is not showing up on the front end, but there's extra space for it in the dev tools.

My setup involves haml and angular on the front end. I don't believe it's necessary to showcase the controller for this specific problem. Also, I replaced actual content with placeholder text for demonstration purposes.

The section in my rakefile looks like this:

{
   "partial":"message",
   "params":{
      "primary": true,
      "icon": "<i class='fa fa-odnoklassniki'></i>",
      "body":" With Placeholder Text as your president, you can have the full assurance of knowing that your country will be awesome   "
   }
},

The haml file responsible for rendering this content is located here:

%div{ 'ng-if' => 'option.params.primary' && 'option.params.icon'}
    %div{ 'ng-include' => "'/assets/ng/features/politicians/satire/presidents.html'" }

Answer №1

You may be experiencing issues with your HTML being sanitized by Angular. Double check the output to confirm this. One possible solution is to implement a filter in your application that allows trusted HTML to be rendered:

.filter('trustedHtml', ['$sce', function($sce){
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}])

Once you have added the filter, you can use it on any data like this: {{bar | trustedHtml}}

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

What is the best method to utilize a promise to delay the execution of a function until the data is received and stored

Currently, I am facing an issue with my API where the model variable is returning undefined before any data is populated in the return_array. I am unsure of how to implement promises or another method to ensure that the variable waits for data to be fille ...

Adjust the scrollbar color when hovering over a particular div

Is there a way to change the color of a div's scrollbar when hovering over the div without assigning an id to it? I've attempted the following methods so far: div:hover { ::-webkit-scrollbar {color: black} } and div:hover + ::-webkit-scroll ...

The navigation bar alignment to the right is malfunctioning

I'm puzzled as to why the navbar-right class is not properly closing out the two navigation bar elements on the right. Despite adding the correct code, it doesn't seem to be working as expected. <nav class="navbar fixed-top navbar-toggleable- ...

When you delete a property from a duplicated version of an Object in JavaScript, it ends up impacting the original Object as

Let's imagine we have an array of objects, var data = [{ "sss": "sssssss", "yyy": "ssdsdsds", "www": "1212121", "Group": "Mango" }, { "sss": "sssssss", "yyy": "ssdsdsds", "www": "1212121", "Group": "Mango" }] The desi ...

Issue arising with hover animation on a stable colored background

I recently created my own website and utilized this codepen https://codepen.io/nikolamitic/pen/vpNoNq to incorporate an animation effect on my name. While it works well overall, I encountered an issue when trying to decrease the line-height of my elements ...

Typeahead feature not displaying expected values in JSON object response

I am encountering an issue with retrieving specific data from a JSON file as it returns nothing. I came across an example on http://jsfiddle.net/Fresh/1hrk0qso/ which works perfectly when using the provided URL. url: 'https://cdn.rawgit.com/twitter/ ...

Guide on sending a JSON response from a POST request in JavaScript

After creating an API in Django that provides a JSON response based on a variable entered in the URL, I encountered a challenge with fetching and displaying this data using JavaScript. For instance, consider this URL: A sample of the JSON response looks ...

The Unforeseen Consequences of Bootstrap Navbar CSS

I'm still learning CSS, so bear with me if I don't explain this issue correctly. Whenever I click on a navigation menu tab in Chrome or Safari, a mysterious blue rectangle appears. It doesn't show up in FireFox though. I'm not sure what ...

Screen the received JSON data for a specific section of the website

Is there a way to extract Json data from a website using "selenium.captureNetworkTraffic("json")"? I need to refine the results for a specific grid on my website which contains multiple grids. How can I filter the data for a particular grid? Additionally ...

Validation for dates in Angular.Js input is important to ensure that only

Take a look at this form: <form name="user_submission" novalidate="novalidate" method="post"> <input type="date" name="date_of_birth" ng-focus="save_data()" ng-model-options="{timezone: 'UTC'}" ng-pattern="/^(19\d{2}|[2-9]& ...

Understanding the Typescript Type for a JSON Schema Object

When working with JSON-schema objects in typescript, is there a specific type that should be associated with them? I currently have a method within my class that validates whether its members adhere to the dynamic json schema schema. This is how I am doing ...

What is a way to center content vertically without using extra containers?

I've been facing challenges in vertically aligning an item within its container. Despite trying multiple suggestions that advise wrapping the content in another div or container, I encountered various issues which I won't delve into. Therefore, ...

How to extract data from a JSON API using Flutter

I have a service that provides data through an API. My goal is to dynamically change the color of a box based on the presence of a specific string in the data received from the API. Currently, I am checking if the last value in the dataset matches a cert ...

Combining all CSS files into one and consolidating all JavaScript files into a single unified file

Whenever I need to add a new CSS or JS file, I always place it in the header section like this Add CSS files <link rel="stylesheet" href="<?php echo URL; ?>public/css/header.css" /> <link rel="stylesheet" href="<?php echo URL; ?> ...

Having trouble getting the CSS URL to work when using a leading slash?

I am attempting to utilize a background-image with a "root-relative" path like this: background-image: url("/img/bg.jpg");. In Chrome, the property is showing correctly but the image does not appear. When I change it to http://localhost:8080/img/bg.jpg, t ...

Unveiling the Magic: Transforming Objects into HTML Attributes using AngularJS

I have been working on developing a highly dynamic ng directive that creates tables based on a given data array and configuration object. I am looking for a way to assign attributes dynamically based on an object within the scope. For example, if I have an ...

Effortless gliding towards the left

I am looking to incorporate buttons for smooth horizontal scrolling within my container. Currently, the functionality is in place but I would like to enhance its smoothness. How can I improve the scrolling experience? Should I consider using a different p ...

Is it possible to create a dynamic zig-zag design with CSS that

I am looking to design a dynamic snake/zigzag layout that consists of square images and circles, starting from the center of the container and descending in a winding fashion. The number of elements is not fixed and is generated based on data received fro ...

What is the best way to update the background color for specific days in fullcalendar?

I have been working on my fullcalendar code and I am trying to figure out how to change the background color only for Feb 14. dayRender: function (date, cell) { var Xmas = new Date('2017-02-14'); var weekday = Xmas ...

Automatically adjust text size within div based on width dimensions

Dealing with a specific issue here. I have a div that has a fixed width and height (227px x 27px). Inside this div, there is content such as First and Last name, which can vary in length. Sometimes the name is short, leaving empty space in the div, but som ...