assign a fontawesome icon to a temporary placeholder

I have tried multiple solutions from various sources, but nothing seems to be working. My goal is to apply the fontawesome icon f14a to a specific field. What am I doing wrong?

document.getElementById('property_charges').setAttribute('class', 'fontawesome-placeholder');
document.getElementById('property_charges').placeholder = '&#f14a';

Here is the corresponding CSS:

.fontawesome-placeholder {
  //padding:10px;
  //font-family: FontAwesome;
  //z-index: 9999;
  //z-index: 1;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
}

The solution provided in the "duplicate" link isn't effective, and I prefer not to use JQuery in this project.

javascriptfont-awesome

Answer №1

When incorporating JS/jQ and unicode, remember to include a u after the forward slash. Avoid using the HTML entity unless you plan to embed it directly into HTML code. Certain CSS styles are necessary for proper display.

document.getElementById('fa').setAttribute('placeholder', '\uf14a');
.icon {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">

<input id='fa' class='icon'>

Answer №2

If you're looking to implement Font Awesome as a placeholder and then switch back to the default font when the user inputs text, you can achieve this effect using CSS only, without the need for JavaScript. This can be accomplished by utilizing the ::placeholder pseudo-element.

(Please note the correction: you are missing an "x" in your code: &#f14a --> &#xf14a;)

#property_charges::placeholder {
  font-family: "Font Awesome 5 Free";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<input id="property_charges" placeholder="&#xf14a;">

(In this example, the font name is set to "Font Awesome 5 Free" for Font Awesome 5. If you are using an older version, your font name may be FontAwesome.)

Answer №3

document.getElementById('fa').setAttribute('placeholder', '\uf14a');
.icon {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">

<input id='fa' class='icon'>

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

Protractor - selecting a hyperlink from a list

Imagine you have a todo application with tasks listed as follows: Walk the dog, Eat lunch, Go shopping. Each task has an associated 'complete' link. If you are using Protractor, how can you click on the 'complete' link for the second t ...

javascriptangularjsjasmineprotractor

How can I display different divs based on a selected option?

I'm encountering difficulties while attempting to develop the code for this specific task. My goal is to display or hide divs based on the selection made in a select option, with a total of 4 options available. There are 2 select elements <select ...

javascriptjqueryhtmlcss

Retrieve the outer-HTML of an element when it is clicked

I am working on a project to develop a tool for locating xpath, and I am seeking the most efficient and user-friendly method for allowing the user to select the desired element on a webpage. Ideally, this selection should be made with just a single click, ...

javascriptpythonhtmlseleniumxpath

Is React State with JSON Object Losing Updates?

Encountering a strange issue here. At the start of my program, I load various values into a JSON object stored as a User State Object in a Postgres table. Although the object is quite large, I'll provide an example below. const [person, setPerson] = u ...

javascriptreactjsnext.js

Tips on incorporating "get_template_directory_uri" into a JavaScript function

I am currently working on my WordPress PHP file code, where I have included a JavaScript snippet to display names and images from a query. While the names are being displayed correctly, I am encountering an issue with the images not showing up. After tryi ...

javascriptphpwordpress

Invoking a JavaScript function within an ASP Repeater

I am looking to incorporate a JavaScript function into an ASPX page within Visual Studios 2012. This function is designed to retrieve 7 values from a database multiple times and dynamically adjust the CSS based on these values. Additionally, it targets a s ...

javascriptasp.netvisual-studioasprepeater

Take out the bottom of the structure

Currently, I am utilizing ThreeJS to showcase a house model. My goal is to create a grassy area surrounding the house. However, I have encountered an issue where if the grass is simply a flat plane, it ends up appearing inside the house itself (as seen in ...

javascriptthree.js

"Implementing database updates with AJAX and utilizing the PUT method: a step-by-step guide

I am attempting to update a database property named "Estado" using ajax. Here is the code I am using: function updateDatabaseProperty(idMarker, newState) { $.ajax ({ url: `/api/IgnicoesAPI/${idMarker}`, type: 'PUT ...

javascriptc#asp.net-coreput

Integrating Node.js with static HTML documents

I'm currently exploring methods for making node.js API calls from static HTML. While I've considered using Express and similar template engines, I am hesitant since they would require me to adjust my existing HTML to fit their templates. Typicall ...

javascripthtmlnode.jstemplatesexpress

insert a new user into a MongoDB collection

I am facing an issue with adding a user to my collection called users. The code I'm currently using is: var user1 = { Username: "joonyoftv", Password: "joon123", Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cf ...

javascriptmongodb

Sort a JSON object in ascending order with JavaScript

I have a JSON object that needs to be sorted in ascending order. [{ d: "delete the text" }, { c: "copy the text" }] The keys d and c are dynamically generated and may change. How can I sort this into? [{ c: "copy the text" }, { d: "delete the text" }] ...

javascriptjqueryjson

Sending parameters in SwipeableDrawer in ReactJS using Material UI

This is a demonstration of my SwipeableDrawer from material-ui const sideList = ( </List> <ListItem button component={Link} to="/todos"> <ListItemText primary="Todos" /> </ListItem> </List> ) <SwipeableDrawer o ...

javascriptreactjsmaterial-ui

In my Laravel Vue JS project, every Put and Delete route method triggers a 302 error

I'm encountering an issue with my Laravel Vue JS application where the PUT and DELETE methods are throwing a 302 error. Here is the response from my localhost: And this is the response from my server: While everything works perfectly on my lo ...

javascriptphplaravelvue.js

What distinguishes the sequence of events when delivering a result versus providing a promise in the .then method?

I've been diving into the world of Promises and I have a question about an example I found on MDN Web Docs which I modified. The original code was a bit surprising, but after some thought, I believe I understood why it behaved that way. The specific ...

javascriptnode.js

What is the process of transferring fetched data to a different module?

I am facing a situation with two modules, module.js and controller.js. In the module file, I have the following code: export class Module { constructor(){ const fetchParams = { method: "GET", mode: "cors", c ...

javascriptnpmwebpackecmascript-6module

Why are my cursor and my drawing line on opposite sides?

I've been working on a JavaScript drawing app, but I'm facing an issue where the drawn elements are not aligned with my cursor. The positioning seems off, especially when moving to the right or up on the canvas. As I move towards the furthest lef ...

javascriptcss

How to Use PHP to Submit Form Information

I am a beginner in PHP and I need help with sending form details to an email address. I have tried looking for solutions online but I keep running into the same issue - when I submit the form, it downloads the PHP file instead of sending an email. Below i ...

javascriptphpjqueryhtmlforms

What steps should I take to fix the error message "Uncaught TypeError: Class constructor m must be called with 'new'" that occurs while attempting to access a polymer v2.0 application?

Is there a way to resolve this error that occurs when attempting to open a Polymer v2.0 app on Safari in iOS? Uncaught TypeError: Class constructor m cannot be invoked without 'new' from custom-elements-es5-adaptor. The Polymer v2.0 starter k ...

javascriptpolymerpolymer-2.x

What is the best way to verify async actions that update the UI in my React Native application?

Currently, my setup involves utilizing jest alongside @testing-library/react-native. Below is a snippet of code: Upon clicking a button, a function is dispatched: onPress(_, dispatch) { dispatch(getUserAddresses()); }, This dispatched functi ...

javascriptreactjsreact-nativeasynchronousjestjs

function called with an undefined response from ajax request in React

Hello, why am I getting the response "callback is not defined"? Component 1: console.log(getUserGps()); Component 2: import $ from 'jquery' export const getUserGps = () => { $.ajax({ url: "https://geolocation-db.com/jsonp", ...

javascriptreactjs