How can we integrate this icon/font plugin in CSS/JavaScript?

Check out the live demonstration on Jsfiddle

http://jsfiddle.net/hc046u9u/

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>

<i class="material-icons">add</i>
<i class="material-icons">replay</i>

The aspect that puzzled me the most was the way icons were incorporated using the inner text of the <i> element rather than a class attribute (such as 

<i class="icon-add"></i>
or 
<i class="icon-reply"></i>
).

Upon inspecting the <i> node in the Chrome developer tools, it appeared that they all looked similar and were difficult to differentiate through CSS selectors.

If the icon is determined by the inner text, how can different icons be assigned to these <i> elements using CSS?

Another perplexing issue for me was understanding how these icons are executed (whether through icon fonts, PNG images, or SVG graphics). While it appears as if they are generated using an icon font, I could not locate any CSS rule like:

.fa-flag:before {
  content: "\f024";
}

If the icons are not created using the :before selector and content property, then how exactly are they implemented?

javascriptjqueryhtmlcssfonts

Answer №1

This method involves a clever technique where the icons are created using combined glyphs within the font itself. This means that sequences of letters like "add" and "replay" are shown as a single character in the font, just like how certain letter combinations such as "fi" and "fl" are displayed as one character in various fonts. The icons are not generated through CSS styles but rather from the font's design.

To understand how this works, try applying the font to an input field: when you type randomly, nothing appears on the screen because individual characters do not correspond to any specific icon. However, if you type "add," you will see a plus symbol appear.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<textarea class="material-icons">add remove replay</textarea>

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

Two functions are contained within an object: Function A and Function B. Function A calls Function B from within its own code

If I have two functions within an Object. Object = { Function1() { console.log('Function 1') }, Function2() { this.Function1() } } The Function1 is not being executed. Can someone explain why this is happening an ...

javascriptfunctionobject

Tips on accessing form input values with HttpServletRequest in Java servlets

Okay, I have a bit of a newbie question here. I've been trying to debug this issue for hours now and can't figure out what's going wrong. I'm attempting to submit a form using ajax, then in my controller, I want to parse the input value ...

jqueryajaxspring-mvc

How can I position divs in a way that the top right corner of the child div touches the bottom left corner

I am currently working on implementing a message box feature on my website. When a user clicks on the inbox icon, I want a messages box to appear, similar to how stackoverflow handles it. Stackoverflow achieves this by placing a div outside the ordered lis ...

htmlcssflexboxcss-position

The port has not been defined

My Node server appears to be operational, however the console is displaying an error message stating that the port is undefined. const express = require('express'); const env = require('dotenv') const app = express(); env.config(); ap ...

javascriptnode.jsportundefined

How would the input value change if the clock time changed?

I am working with dynamic inputs that allow me to add and delete rows with inputs. These inputs include material-ui timepickers, which have an icon of a clock next to the input field. When I click on the clock icon, a clock widget appears. However, the val ...

javascriptreactjsinputmaterial-uionchange

Using Node and Mongoose to link documents that rely on each other for reference

Is there a way to add a document after another document has been successfully inserted using node and mongoose? For example, I initiate the creation of a document with mongoose, and once it is successfully added, I want to trigger the insertion of another ...

javascriptnode.jsmongodbexpressmongoose

Retrieving child class prototype from superclass

In my current project, I am working on implementing a base class method that shares the same logic across all child classes. However, I need this method to utilize specific variables from each child class. function A() {} A.prototype.foo = 'bar' ...

javascriptnode.js

The concept of AJAX send function and toggling button visibility

I am facing a challenge with a textarea and send button on a panel that is displayed after entering the first character. The visibility of the button is controlled by the isButtonVisible() method. Once clicked, it sends the text from the textarea using the ...

javascriptjqueryhtmlajaxangularjs

Utilizing icons with vuetify's v-select component: a guide

In the code snippet below, I am using a v-select element to display a list of items filled from an array: <v-select v-model="myModel" :items="users" chips :readonly="!item.Active" label="Required users to f ...

javascriptvue.jsvuetify.js

The onsubmit function encounters an issue with invocation when implemented with Node.js

When I submit the form, I want to perform some validations. However, it seems like the validation function is not working as expected. The alert part does not appear when triggered. Here is the code snippet: function validation(){ alert("somethi ...

javascripthtmlnode.jsexpressejs

Executing a server-side Java function from client-side JavaScript or jQuery on a JSP page

My JSP file has a dropdown list where I can select different entity kinds. Upon selecting an entity kind, I want to populate another dropdown list with the field names associated with that entity kind. This requires calling a JavaScript function when chang ...

javajavascriptjqueryajaxjsp

Avoid deleting a row in Sequelize if it is referenced in another association

Is there a method in Sequelize.js to trigger an exception when attempting to delete a row that is associated with another entity? For example, consider tables for Roles and Users. They have a many-to-many association, allowing any user to have multiple ro ...

javascriptnode.jssequelize.js

What is the method to modify the background color of el-pagination?

I am using el-pagination on a dark page and I want to make its background color transparent. When I do not use the 'background' prop, the background color of el-pagination is white. Here is how it looks: (sorry I can't add an image) htt ...

javascriptvue.jselement

The challenges of positioning HTML li elements in a floating layout

Check out my website: . I'm having an issue with the layout where two <li> elements are stacked on top of each other and one is floating next to them, but it's only floating next to the second one. How can I make it float next to the first ...

htmlcss

Unexpected behavior involving the onchange event, input validation, and the enter key

One challenge I encountered was implementing validation for a date input field in a form. The requirement was to only allow dates starting from today up to a maximum of 3 years in the future. If a valid date is entered, a modal should appear; otherwise, an ...

javascriptjqueryvalidationdate

Obtain user input and extract the name using jQuery's serialization function

Trying to extract user input from a dynamic form using jquery serialize. The structure of my form is as follows: <form id="lookUpForm"> <input name="q" id="websterInput" /> <button onclick="webster(); return ...

javascriptjquery

No display of Tailwind updates on local server in Safari browser using NextJS and a Mac M1

For my personal project with NextJS, I am using Tailwind CSS, but I am experiencing frequent issues with updating styles. It seems like there is a 50/50 chance that Tailwind will apply the styles to the component properly, and sometimes I have to go throug ...

cssreactjsnext.jstailwind-css

Can the placement of divs impact search engine optimization (SEO)?

My website is currently structured with div containers in the following order: Less important left side bar Less important right side bar The core center content at last I am concerned about the impact on SEO as the core content comes after the sidebars ...

htmlsearch-engineseogoogle-search

Increase the padding on the left side of a background image

UPDATE: Solution discovered at this link thanks to Mr. Alien I am attempting to create a heading that resembles the following Title ------------------------------------------------- I have an image that I intend to use as a backdrop for it. However, I& ...

htmlcssless

"Utilizing multiple class names in Next.js to enhance website styling

Looking for a way to apply multiple classNames in Next.js, especially when dealing with variable classnames? I'm following the component level CSS approach. Take a look at my code and what I aim to achieve: import styles from "./ColorGroup.mod ...

cssreactjsnext.jsclassname