After adding an icon to a webpage, I noticed that it replaced the old, semi-deprecated <i> tag and instead used a customized image tag. It almost seems like <i ...> is just a simpler version of <img ...>.
I'm curious about how this functionality is achieved with just a stylesheet. Can other tags be overridden in the same way for different purposes?
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
*margin-right: .3em;
}
It's interesting to note that the choice of using the i tag here seems arbitrary, possibly due to its deprecation. The use of an image tag wouldn't be suitable in this scenario since a sprite sheet is being used instead...
.icon-glass {
background-position: 0 0;
}
Twitter bootstrap is utilizing empty <i> elements in their example markup for CSS Sprites. The choice of tag isn't crucial, but HTML5 has given significance to <i> and <b> elements, providing them with new meanings:
http://www.w3.org/TR/html5/the-i-element.html
The i element signifies a span of text conveyed in an altered voice or mood, or set apart from ordinary prose to convey distinct textual qualities, such as a taxonomic label, a specialized term, a foreign language idiom, a thought, or the name of a ship in Western literature.
An absence of content within elements typically indicates less-than-ideal semantic structure, yet many opt for pragmatism over perfection. It could be argued that the icons are more about presentation than actual content, making <img> potentially unsuitable while background images prove more efficient (and reduce HTTP requests).
If you're inclined towards meticulousness as I am on occasion, consider adding some text:
<span class="icon icon-ok">OK</span>
Subsequently, utilize CSS to conceal the text using a technique like text-indent:-999px (which Bootstrap likely already implements). Essentially, it's transformed into a block element with fixed dimensions and a background image.
The "i" tag isn't a shortcut for an icon; it's meant for italicizing text in HTML4, with a slightly different purpose in HTML5. Unfortunately, Bootstrap and some developers prioritize speed over quality or semantics and misuse this tag.
Using empty tags is incorrect from a semantic standpoint. The "i" has no association with icons.
It's worth noting that employing text indent to conceal text isn't accessible, so avoid doing so at all costs.
Don't get caught up on the specific tag, focus on the class instead. Consider using
<span class="icon-help></span><i> is a quicker alternative and can represent an icon as well.
Think of a tag as a label. While you can assign any tag to anything you'd like, it's best practice to choose tags that accurately represent the content they are labeling. Although the <i> tag is not commonly used anymore, it's still a reliable choice for Twitter Bootstrap to ensure its purpose is clear and won't be replaced by another element.
I'm currently working on a website where the body has a specified font-size property that is inherited by all elements on the page. Some tags on the page have font-sizes specified in percentages (%). Others are assigned sizes in pixels (px). I&apos ...
In order to demonstrate the issue, I decided to create a new App using the create-react-app tool (available at https://github.com/facebook/create-react-app) My goal is to import data from CSV files into the app. Currently, I am utilizing the CSV method pr ...
Just trying to figure out the most effective plan of action and required tools/frameworks for this task: 1. Access webpage 2. Navigate to specific page by clicking buttons and filling in text boxes for search 3-4 Repeat 3. Retrieve HTML from page and s ...
I've been working on creating a round progress bar that features an arrow at the front. This is my current progress: HTML Code: <!-- Container --> <ul class="progress"> <!-- Item --> <li data-name="Item 1& ...
I'm currently in the process of scraping a javascript-based webpage. After reading through some discussions, I was able to come up with the following code snippet: from bs4 import BeautifulSoup import requests website_url = requests.get('https:// ...
I am currently working on a website and I am looking to create an effect where an image is masked by an overlay. The goal is to achieve a "fade out" effect, without any actual animation, but rather make it appear as if the image is gradually fading into th ...
UPDATE: After carefully reviewing my code once again, I have identified the issue. The problem lies in the positioning of a certain function (unfortunately not included here), but rest assured that I have rectified it! Allow me to provide a brief summary ...
I am working with 2 radio buttons and I need to dynamically check one based on a variable value. <input type="radio" name="team" id="team_7" value="7"> <input type="radio" name="team" id="team_8" value="8"> The variable number is set dependin ...
Currently in the process of developing a feature for the price tab using React. These components are designed to allow users to add price classes to their shopping cart. One challenge I'm facing is how to retrieve the HTML string of an HTML tag. Here& ...
I am facing an issue with Bootstrap where every time I click on a collapse element, the rest of the body moves up or down. Is there a way to prevent this from happening? Here is an example of my code: <body> <div class="panel-group"> ...
I have a collection of phrases structured like so: [ { text: "This is a sentence." boldSubstrings: [ { offset: 5, length: 2 } ] } ] My goal is to display each phrase as a line using the following format: ...
This seems like a fairly straightforward task, but I'm getting a bit frustrated with it. Is there a way to move an entire div by simply holding down the mouse button on a particular button? let container = document.getElementById('abo ...
example status 1 Hello there! I'm trying to create a table (check out example status 1 for guidance). Here's the code snippet I am using: <table> <tr> <th>Product</th> <th>Price</th> <th>Av ...
I have primarily focused on server-side development of enterprise applications (Java EE, Spring framework). However, I am now exploring client-side technologies for better understanding (not necessarily to become an expert). I have studied HTML and CSS th ...
I need to resize an image inside a table's <td> when the screen size is in mobile mode. Although I have already added a viewport, my mobile query works correctly for other purposes except for the image. Here is the HTML code: <table class="t ...
As I work on creating a responsive email template that is compatible with Outlook, I encounter a strange issue. The HTML for Outlook displays correctly, as does the responsive HTML. However, once the email is sent to Outlook, the content becomes duplicated ...
I am currently working with AngularJS and MongoDB. In my MongoDB data, there are some text elements that contain a \n, causing each line to be displayed on a new line based on the occurrence of \n. However, I also want to add line numbers to each ...
When using npm install --save <package_name>, it typically installs the latest stable version of the package. If you want to specifically install the most recent release, such as Bootstrap v4, you would need to use npm install <a href="/cdn-cgi/l ...
For instance: <script> export default { data() { return{ varinjs: 1, } } } </script> <style lang="stylus"> varincss = varinjs body if varincss == 0 ba ...
I have a mysql database with the following columns: firstname, lastname, age, email, phone When I attempt to update the data, it sometimes turns out like this: John Doe 23 <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2e2e2 ...