I'm having trouble getting the search icon from font awesome to display properly within my search bar. Here is the code I'm using:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<div class="section-b">
<p> <input type="text"><i class="fa-solid fa-magnifying-glass"></i></p>
</div>To make it work, simply place your icon in the designated area for icons.
.icon {
position: absolute;
}
.section-b{
position: relative;
}<div class="section-b">
<span class="icon"> icon </span>
<p> <input type="text"></p>
</div>Ensure that .section-b has a positioning of relative and apply absolute positioning to the icon.
.section-b {
position: relative;
width: 200px;
}
.section-b .input {
border: 1px solid #ccc;
background: #fff;
height: 20px;
width: 200px;
}
.section-b .fa-magnifying-glass {
cursor: pointer;
position: absolute;
top: 47%;
right: 0;
transform: translateY(-50%);
background: #fff;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="section-b">
<input class="input" type="text" name="Search" placeholder="Search">
<i class="fa-solid fa-magnifying-glass"></i>
</div>Follow these steps to style the input and icon within a div container:
Step 1: Wrap the input and icon tags in a div element.
Step 2: Set the display property of the div to inline-block and position it relative.
Step 3: Position the icon tag absolutely within the div, and align it to the top right corner.
div {
position: relative;
display: inline-block;
}
i {
position: absolute;
right: 0;
top: 0;
margin: 3px 0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<div>
<input type="text">
<i class="fa-solid fa-magnifying-glass"></i>
</div>To enhance the structure, consider using span instead of i to contain your icon. This approach is more semantically accurate compared to utilizing the italics tag.
Afterward, just assign the span with position: absolute and then adjust the icon's position using the top and left properties.
span {
position: absolute;
left: 8.5rem;
top: 1.2rem;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<div class="section-b">
<p> <input type="text"><span class="fa-solid fa-magnifying-glass"></span></p>
</div>I am trying to create a rollover effect that displays text when the user hovers over an image. Despite researching numerous tutorials, I have found limited resources on incorporating text or captions using jQuery. Most of the available tutorials focus on C ...
I have a question about handling values in a list and displaying the "create value" component to the user when needed. How can I efficiently compare search input values with those in the list and determine if a match exists? If no match is found, the "cr ...
I have implemented a jQuery and CSS code to reveal my contact form as I scroll down the page. However, I am facing an issue with setting a specific range for displaying the element while scrolling. Currently, I have only managed to handle the scrolling dow ...
I've been struggling to create an input form with labeled using a dl, dt, dd list. I want the first label on the left, the second on the right, and the input in the center. However, no matter what I try, I can't get the second label to align corr ...
I'm currently testing how the page appears on a 1366x768 laptop. When inspected in the device, it looks perfect: https://i.sstatic.net/OECnx.png However, on the actual laptop screen, it's completely off: https://i.sstatic.net/chaeY.png It&ap ...
Recently, I encountered an issue with a hoverable drop-down menu that has been functioning smoothly for years. After adding a new sub link, the code broke. Here is the code for the menu: #divMenu, ul, li, li li { margin: 0; padding: 0; } #divMenu { ...
I have successfully implemented a feature carousel slider using the jquery.featured.carousel.js file along with some CSS. Here is the jsfiddle link to my project: LINK. When running this code on localhost, I noticed that I need to refresh the page every ...
I have 4 different checkboxes, each one corresponding to a specific text box. I want to enable the disabled textbox when its corresponding checkbox is checked. Currently, I have written a function for each checkbox in the HTML tag itself using onclick="doc ...
Hi everyone, I have a function that works as follows: define(function () { 'use strict'; var sel, range, span; return function () { span = document.createElement("span"); span.className = 'highlight'; if (window.ge ...
Here is an example of the code I am using without the website included. from bs4 import BeautifulSoup import requests import csv import random as rd source = requests.get('http://example.com').text file = open('C:/xampp/htdocs/new-site/text ...
Can anyone help me with sending JSON data from HTML and receiving it in Node.js? I've been trying for hours and I'm getting frustrated. It seems like I'm close to a solution but no luck so far. In my VSCODE, the response is null (req.body = ...
I am working with a layout that uses flexboxes for structure. Both the fixed sidebar and main container have scroll functionality. However, I have encountered an issue where scrolling in the sidebar causes the scroll in the main container to activate whe ...
I am experiencing an issue with UTF-8 characters in the page title. I would like to include the music symbol ♫ on the page title. The strange thing is that sometimes it displays correctly (in Google Chrome) and other times it shows a square symbol indic ...
I'm a newcomer to this field and recently encountered an issue with my div styling. My code was compatible with Chrome 11 but did not render properly in Firefox 4, Opera 11.1, and IE 8. Upon review, I found that the style for the div was as follows, a ...
https://i.stack.imgur.com/vAJv2.png This particular challenge involves creating a responsive mobile menu. In this design, the width of all children is determined by the longest child element. The CSS should ensure that the .index class spans the full wi ...
My goal is to create a sticky or fixed position header inside a div with a list, but I'm facing an issue where it only sticks to the width of the text. If I expand the width to 100%, it takes up the size of the entire page: import styled from 'st ...
I've been attempting to embed the Stack OverFlow website into an HTML page using an iFrame, but I'm running into some issues. Oddly, when I tried embedding my other two websites, they displayed correctly, but Stack OverFlow is not showing up on m ...
Currently, I am coding in PHP and using Bootstrap. In my project, there are two columns - the LEFT column displays text, while the RIGHT column contains a form: Presently, when viewing on desktop, both columns are visible. However, on mobile devices, ...
Can an HTML form post directly into a Google Docs spreadsheet without allowing public access or modifications by others? I'm wondering if it's possible to achieve something like this: <form action="https://google-docs-url" method="POST"> ...
I am currently developing a Java FX program that loads a folder containing HTML/CSS/JS files with 3 different websites. While the websites are displaying correctly in the webview, I am looking for a way to capture user interactions, such as checkbox selec ...