Using CSS to apply font characters as background images

Is it possible to use a font character, like one from font-awesome, as a background-image for an input element?

<style>
#id {
    background-image: content('\f2d3'); /* content instead of url() */
    background-position: right center;
}
</style>

<input id="test" />

I'm considering saving the character as an image or using the pseudo-element :after with content and proper positioning. Are there any other solutions to achieve this effect? Could I access the character in SVG and use inline SVG as content?

Update:

I partially solved it using SVG (see https://jsfiddle.net/92h52e65/4/), but I still face the issue of using the correct font.

<style>
#input1 {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="30px" height="20px"><text x="5" y="15" font-family="FontAwesome">x&#xf2d3;</text></svg>');
  background-position: right center;
  background-repeat: no-repeat no-repeat;
}
</style>

<input id="input1" placeholder="insert some text here" size="30" required />

To make this work in IE and FF, I had to use base64 encoding instead of utf8. I kept the utf8 version here for readability purposes.

Answer №1

Do you have a specific purpose for using background-image?

If not, consider this alternative method:

.input1wrap::after {
  font-family: FontAwesome;
  content: '\f2d3';
  margin-left: -1.5em;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<span class="input1wrap">
  <input id="input1" placeholder="insert some text here" size="30" required />
</span>

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

Struggling with Implementing a Hollow Button in Bootstrap 3

Could you please review This Demo and provide guidance on how to remove the grey background color when clicking on the button? I attempted the following: .btn-hallow:hover{ background: none; color: aliceblue; } .btn-hallow.active:focus{ backg ...

Ways to stop a background image from repeating?

<div style="background-image: url('https://i.ibb.co/v1B855w/bg15.png'); color: #000000; background-color: #000000; background-attachment: fixed; text-align: center;"><img src="https://i.ibb.co/L6zQY0S/name6.png" /> ...

What is the best way to provide an accessible title to an SVG icon using a tooltip in MUI?

When a tooltip is used with an icon button, the button automatically takes on the accessibility name of the tooltip title. This setup, as demonstrated in the documentation example, ensures that a screen reader announces it as "Delete, button", which is ben ...

What is the best way to position a span overlay on a card in the lower right corner

I am looking to add a thumbnail with the duration displayed in the bottom right corner of a video, but I am facing issues moving the span object within the card using Bootstrap 4. Whenever I try to increase the margin-left beyond 50%, the span object crash ...

What is the best way to update or include a new class in the jQuery mobile loader widget?

After reviewing the documentation at this link: I discovered a method to modify or add the default class of the loader widget, ui-loader. Despite my attempts, I have not been able to see any changes. You can view my demo here: https://jsfiddle.net/yusril ...

Select the even-numbered occurrences of a specific class in CSS using the nth-child()

I am encountering an issue with my table layout. The structure is similar to the following: <tbody> <tr class="row">...</tr> <tr class="row--expanded">...</tr> <tr class="row">...</ ...

Selected Angular Radio Button

Back in the good ole days of basic HTML and CSS, I was able to achieve the following: input:checked+label { background-color: #f00; } <div class="col-xs-6"> <input type="radio" id="template-1" name="template" value="template1" checked> ...

Troubleshooting Bootstrap Social Buttons: Background Color and Hovering Challenges

I've been working with Bootstrap to design social buttons for Facebook and LinkedIn. However, I'm facing an issue where setting the background color to white for the buttons doesn't cover them properly. The white background extends beyond th ...

Exploring the world of CSS: accessing style attributes using JavaScript

So I created a basic HTML file with a div and linked it to a CSS file for styling: HTML : <html> <head> <title>Simple Movement</title> <meta charset="UTF-8"> <link rel="stylesheet" type=&qu ...

Steps to Show an Image When Hovering and Clicking on the Relevant Div

CSS: .imgECheck { position: absolute; top: 0; right: 5px; width: 15px; height: 15px; display: none; } .imgFCheck { position: absolute; top: 0; right: 5px; width: 15px; height: 15px; display: none; } Is ther ...

Using CSS :hover for elements with dual classes only

Is there a way to make the CSS :hover selector work only when two different classes are attached to a div? I have tried a couple of methods, but they eliminate the hover effect. For example: .accordionButton .cyan:hover{ color: cyan; } I cannot s ...

What is the method to display all items in a Vuetify Data Table rather than limiting it to 10 rows?

I have implemented a data table from Vuetify in my project: <v-data-table :ref="`sortableTable${index}`" class="items-table-container" :headers="headers" :items="category.items" hide-default-footer> ...

Designing a patterned rectangle filled with stylish text

I am relatively new to the world of HTML and CSS, and I am encountering a specific challenge with CSS. My goal is to design a section that looks like this: ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- The ma ...

Require that double-width unicode symbols are displayed as double-width in Markdown or CSS

I am seeking a solution to manage the visual width of double-width unicode characters like the LARGE ORANGE SQUARE ...

Customizing the Background of an Input Box

How can I create an input box with a specific background? I have tried the following code but it's not displaying properly. What is the correct way to achieve this? In addition, I need to create variations of this button as described below: I wa ...

Arranging divs in a horizontal line while keeping the content organized in a vertical manner within the footer

I've been searching for a while now, but I haven't found any solutions that actually work. This might be repetitive, so my apologies in advance. The issue at hand is aligning three divs horizontally to create a footer, while maintaining a vertic ...

parent div with overflowing height

I am working with 2 tabs, each displayed as flex. My goal is to have a scroll bar appear only on the list within #myTabContent if it overflows .main-panel due to the content, rather than having a scroll bar on the entire div. This way, #myTabContent should ...

What is the best way to transform the words in my JavaScript array into clickable links?

I am working on a search bar that autofills words and I want to turn those autofilled words into clickable links. For example, if I type "locations" in the search bar, I want it to autofill the word "locations" and turn it into a link that directs me to pa ...

Customize the fieldset style in Bootstrap 5

In earlier versions of Bootstrap (or with plain CSS), the following HTML code used to result in a fieldset with a visible border, where the legend sat on top: <fieldset> <legend>Test</legend> Welcome! </fieldset> Here is how ...

Can the card overlay slide appear solely on top of the image?

I am trying to create a gallery section of cards using Bootstrap 4 where I want the user to hover over each card and have an overlay slide or fade in, covering only the image. Currently, the overlay slides in over the entire card instead. I have been stru ...