Is it possible to incorporate Google icons within Freemarker?

https://i.stack.imgur.com/Pv2T4.pngI'm having trouble using Google icons in my project. Can anyone help me figure out how to fix this?

UPDATE: Here is a snippet of my HTML template:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"/>
  <title>Assessment Report</title>
</head>

<body>
<div>
  test
</div>
<div>
   <span class="material-icons" style="color: red;">face</span>
</div>
</body>
</html>

However, I am unable to see the face icon in the generated PDF document.

javacssfreemarker

Answer №1

Consider placing the anchor element within the header section and the span element inside the main section

Answer №2

To properly include the desired font icon library, you must insert the <link> tag within the <head> and </head> tags:

<!doctype html>
<html>
    <head>
        ...
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
        ...
    </head>
    <body>
        ...
        <span class="material-icons" style="color: red;">face</span>
        ...
    </body>
</html>

Answer №3

After investigating, I've identified the problem. We are currently utilizing the flying-saucer-pdf tool to create PDFs, however, this library is unable to process external CSS files. The recommended solution can be found at Flying Saucer not reading stylesheet.

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

Loading JavaScript in the background using Java and HtmlUnit

I am currently facing a challenge while navigating a website using HtmlUnit. This particular website adjusts certain buttons and displays or hides certain elements based on JavaScript events. For instance, there is a text input box along with a button th ...

javascriptjavaajaxhtmlunit

CSS transitions/transforms are failing to impact the necessary elements

I'm currently grappling with advanced transitions and transforms, and encountering some challenges with a section I'm developing. I've managed to get everything working as needed, except for the fact that there is an h5 element positioned ov ...

htmlcsscss-transitionscss-transforms

Why should a semicolon be used in an if statement?

Currently, I am working through a tutorial on custom Android views that I found at this website. In this tutorial, the author has included an if-else condition. Here's the code snippet: if (width &gt; height) { size = height; } else { ...

javaandroid

What is the best way to link various stylesheets to a Rails project?

In my project, I have a main stylesheet called application.css included in the layout file layouts/application.html.erb: <%= stylesheet_link_tag "application" %> However, there is a specific section of the website where I want to use a different st ...

ruby-on-railscss

Which is better: Struts or Zend? Should I choose Java or PHP?

When faced with the decision between Java and PHP, it ultimately boils down to a matter of system resources in today's digital landscape. With Java requiring deployment of the J2EE Stack (~200M) and PHP necessitating a LAMP system (~100M), the hardwar ...

javaphp

What are some creative ways to distribute points randomly based on app activity?

Currently, I'm developing an Android application that awards users with points for engaging with the app. These points can be utilized to unlock various in-app features. In my codebase, there's a function named rewardPoints() that generates a ra ...

javaandroidrandomkotlin

Animating ng-switch transitions within a div element

Utilizing bootstrap 3 panel along with ng-switch for a sliding animation: Check out the Plunker here I am facing an issue where the animation extends past the borders of the panel instead of staying within it. How can I fix this in my Plunker? The desire ...

cssangularjscss-transitionstwitter-bootstrap-3

Error: Bootstrap/CSS not functioning properly on IE and ED browsers

Currently, I am tackling a web application project, and much to my surprise, I discovered that the CSS/bootstrap is not functioning properly on Internet Explorer and Microsoft Edge. Despite attempting various solutions found on Stack Overflow, none seem to ...

htmlcssinternet-explorerbootstrap-4microsoft-edge

Concealing the pathway to a background image

Currently, I have a large grid made up of divs that display different sections of an image. By using background-image and background-position, I am able to showcase parts of the image. However, one issue is that users can easily view the complete image by ...

phpjavascriptcss.htaccess

Steps for designing a stationary footer in HTML and CSS

I have implemented a static footer on my website: HTML <div class="card fixedFooter"> <div class="card-body space-around"> <button type="button" class="buttonFooter" routerLink="/myRouter" > <i class ...

htmlcssbootstrap-4footer

CSS Flexibility

Greetings everyone, it's been a while since I dabbled in web development. I recently worked on my site with the intention of making it responsive using flexbox. This is my first time posting here, so please guide me on how to seek help more effective ...

javascripthtmlcsswebflexbox

Uncovering secret divs with the power of jQuery timing upon reload

Currently, I am in the process of developing a custom Wordpress theme for my blog which includes an overlay-container. When a button is clicked, this container slides in from the top and pushes down the entire page. To achieve this functionality, I am uti ...

javascriptjquerycsswordpress

Why isn't the click function in Java Selenium working as expected?

What could be causing the issue with the click() function not working? Website: String startPage = "http://www.domiporta.pl/mieszkanie/sprzedam?Localization=dolno%C5%9Bl%C4%85skie&PageNumber=24&SortingOrder=InsertionDate"; Code: List<WebEle ...

javaseleniumselenium-webdriverwebdriverclick

Angular 2 - resolving the access control allow origin header issue

My project utilizes Spring on the back-end and Angular2 on the front-end. In the webapp folder of my Spring project, there is a JSON file that I am attempting to access from Angular. I can successfully access the file by directly typing "http://localhost: ...

javaspringangulartypescript

Is the CSS selector '.my-class *:not(input[type="text"])' accurate?

Is there a way to target all elements inside the DOM element with class "my-class" except for input elements of type text? I tried using the following CSS selector: .my-class *:not(input[type="text"]) { // Some CSS properties here } However, this do ...

htmlcsscss-selectors

What is the best way to format a pseudo-element to serve as the header for a paragraph?

We are utilizing Markdown (Kramdown) for generating a static website. When incorporating infoboxes, we can enhance paragraphs and achieve the following outcomes: {:.note .icon-check title="This is a title"} Lorem, ipsum dolor sit amet consectetur adipisici ...

htmlcsscss-positionpseudo-element

The functionality of Bootstrap Mobile css is most effective when navigating by scrolling downwards

I am experiencing a strange issue. I am using Ajax to load the Search form. The CSS is being applied correctly, but there is an unusual problem with the bottom margin. The bottom margin only appears when you scroll down in mobile view. When you load the f ...

htmlcsstwitter-bootstrapbootstrap-4

A specialized Java Comparator for arranging an array of strings in a specific order

I am attempting to arrange the words in a string where the starting and ending letters are the same. The sorting should be done in place while leaving other words undisturbed. import java.util.*; public class MyClass { public static void main(String args[ ...

javaarrayssortingcomparator

Direct jQuery to redirect to a new page and reveal a hidden div

I am facing a situation where I have two web pages named index and results. The results.html page contains some hidden divs with the CSS property set to display: none. My goal is to navigate from the index page using a navigation menu and open the results ...

jquerycss

The center alignment doesn't seem to function properly on mobile or tablet devices

I've designed a basic webpage layout, but I'm facing an issue with responsiveness on mobile and tablet devices. The problem seems to be related to the width: 100% property in my CSS, but I can't seem to pinpoint the exact solution. While tr ...

htmlcssmobilewidthcentering