How to put a Fontawesome icon inside input element and not expand a parent div? (BEM)


I’m trying to put a search icon (from Fontawesome) inside an input block. I use position: relative; for the icon and then lift it up with the bottom property. But the problem is the parent div’s height expands because of that icon. I can’t set a fixed height for the parent div because I follow the BEM rules and the parent div is a block (so it can’t have any paddings and margins). What do I do then?

Please check the header when the window size is less than 768px and more than 768px to see the difference and understand what I mean.
https://codepen.io/eeretrtretretgfgfdsgdgrgtret/pen/OJxLbwZ

Source: CSS – Stack Overflow

November 27, 2021
Category : News
Tags: css | icons | input

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.