Getting the svg's into the search bar

I got the icons I needed from font awesome and the container for the search is in flex row. I tried css ::before and ::after but I dont have the icons installed so I cant use a background url. Here is a pen to see what's going on https://codepen.io/MD-2016/pen/KKBwaXy
MD
CodePen
New Tab Mock
...
17 Replies
MD
MDOPā€¢2y ago
can't use position absolute because it breaks the flow of flex
Gashy
Gashyā€¢2y ago
I dont see the icon in the html. But there are a number of ways to acheive this: - 3 column grid - icon, input and search button - 3 column flex - make the parent relative and set the icon absolute and add padding to the input which matches the width of the icon - cast the svg contents into the background image property via data url of the input and again add padding to the input which matches the width of the icon - save the svg contents in a file and do the same as the last suggestion, but just reference the file name Those are just a few
MD
MDOPā€¢2y ago
Really? It's an svg This interesting though The parent container is flex so I can't do position absolute
Gashy
Gashyā€¢2y ago
The position absolute solution wasnt for flex, moreso inline elements, that's why its listed as a seperate option But it should still work with flex, you need to make the parent relative
Gashy
Gashyā€¢2y ago
Its possible, but probably not advised https://jsfiddle.net/6WAtQ/
SVG as Data URI for background image - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
MD
MDOPā€¢2y ago
I used flex on main and flex on searchContainer
Gashy
Gashyā€¢2y ago
Your search container needs a position relative on it So that the svg inside it positions itself relative to the search container, without that it does it to the body
MD
MDOPā€¢2y ago
Is 3 column flex the better approach since my goal is learning flex?
Gashy
Gashyā€¢2y ago
It's all a matter of preference of what the better approach is, depending on the style you are going for youd find you want to go with certain approaches. If you want to learn flex, and want the SVG to use its native width, I'd go with a simple 3 column flex. That way you dont need to worry about the svg bleeding into the search input and button
MD
MDOPā€¢2y ago
I'm doing a mock of the Google new tab page No search button
Gashy
Gashyā€¢2y ago
But your thread is about the search bar, im confused
Gashy
Gashyā€¢2y ago
is it this you are replicating?
MD
MDOPā€¢2y ago
Right that's why there's no search button I gotta add the search glass on left and Mic on right
Gashy
Gashyā€¢2y ago
its still a search button, its a search by voice option, so its still the same concept
MD
MDOPā€¢2y ago
Oh ok šŸ™‚ I'll try that 3 column flex tonight and post if there's issues Do I need to Change the html any? Or keep it as is?
Gashy
Gashyā€¢2y ago
to achieve what you want id say so yes, youd want it to be an actual search input, have the icon as a label and add a bit of A11Y (always handy to learn this at an early stage). Ive quickly made a dummy example with flex, the search isnt a 1:1 with the real thing, but it gives you an example of how id do it if I was in your shoes. In order to make the alternative searches work you will likely use a bit of JS delegation https://codepen.io/gashydev/pen/abjdJEX
MD
MDOPā€¢2y ago
neat " šŸ™‚
Want results from more Discord servers?
Add your server