CODEWITHSUNDEEP
htmlcssiconsfont-awesome
errorous
errorous

Reputation: 1071

Problems with using fontawesome icons as background on <input>

As title says, I want to have font-awesome icon as a background on my <input> element. For some reason it's not working. My code is:

HTML:

<input class="mod mod-inp inp-alr" placeholder="This is an alert"/>

CSS:

.mod-inp {
    position: relative;
}

.mod-inp:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 0;
    left: 10px;
}

Upvotes: 0

Views: 75

Answers (1)

niftinessafoot
niftinessafoot

Reputation: 61

HTML elements like input and img are considered empty. There is no content in them, and therefore they cannot have :before or :after attributes as there's nothing to wrap.

What you may consider is using a <label> in your code, like this:

<label class="mod-inp"><input type="text" /></label>

and applying the icon to the label. That way, clicking on the label/icon will still give focus to the child input element.

Upvotes: 2

Related Questions