Is there a way to stack grid icons in the font awesome framework to create a 3x2 grid icon?
Demonstration Jsfiddle
<a href="./"><i class="fa fa-square"></i> 1x1</a>
<a href="./" ><i class="fa fa-square"></i><i class="fa fa-square"></i> 2x1</a>
<a href="./"><i class="fa fa-th-large"></i> 2x2</a>
<a href="./"><i class="fa fa-th-large"></i> 3x2</a> << unable to achieve 3 x 2
<a href="./"><i class="fa fa-th"></i> 3x3</a>
To overcome this issue, you need to implement a workaround involving some margin-left adjustments like the following:
Your HTML Code (for 3x2 icon)
<a href="./"><i class="fa fa-th-large"></i><i class="fa fa-th-large over-lap"></i> 3x2</a>
The corresponding CSS code would look something like this:
.over-lap{
margin-left:-7px;
}
What needs to be done?
Unfortunately, there isn't a specific icon for that purpose. However, you can try manipulating the icons by adjusting their margins to achieve the desired outcome. Keep in mind that this method may be considered as a workaround.
<a href="./"><i class="fa fa-th-large"></i><i class="fa fa-th-large"></i> 3x2</a>
.fa-th-large ~ .fa-th-large{
margin-left: -8px;
}
Can you help me figure out why I'm not receiving any return value from the ajax data post? Take a look at my code and let me know where I might be going wrong. Here is a snippet of my jQuery code: $("#btnlogin").click(function(){ var email = $( ...
Is there a way to use ajax and/or jquery to verify that the response received is for the specific request sent? For clarification, I have a search page divided into two parts: the top section for search criteria and the bottom section for matched results. ...
Hi there! I need some assistance with a form that I have created for use with phonegap. I was initially using JavaScript to process it, but now I'm considering switching to jQuery for better functionality. My main goal is to display the "total" in a n ...
'I recently encountered a strange bug. My CSS3 anchors/buttons, which I have been simplifying by removing properties, sometimes require multiple clicks to function. This is completely new to me and quite perplexing. The issue seems to occur randomly, ...
I have a webpage containing 5 images, each measuring 48px by 48px. I would like these images to be displayed in random positions on the page every time it is loaded. While I am aware that I will need to use CSS and JavaScript for this task (specifically f ...
url_main = "https://comic.naver.com/webtoon/detail.nhn?titleId=131385&no=292" This particular website features a comment pagination at the bottom of the page. Upon inspecting the page, I noticed that the buttons were structured like this: &l ...
On my main page, I have an empty div with only a background image. To prevent it from collapsing, I created a sticky footer using the following code: * { margin:0; padding:0; } html, body, #wrapper{ height: 100%; } body &g ...
I'm currently working on implementing a basic load more function for my web page. Right now, the page displays 8 results from the database. When the user scrolls, a load more button appears. Clicking this button triggers an ajax request to another PH ...
I'm currently utilizing styled-components within a React project and I am having trouble finding documentation regarding whether or not a styled component can accept inline styles on the "style" property. For example: The Text component has been styl ...
I've been attempting to make a request to an HTTPS server via the post method within my Ionic app, but I keep running into issues. I've tried two approaches so far - one using $http, and the other using $.ajax. Unfortunately, neither method has y ...
I am working with two CSS classes named as below: .icon_heart{ color: #bdbdbd; } .icon_heart_red{ color: #a6b7d4;; } Within my HTML code, I have incorporated a heart icon. <div class="icon_heart" *ngIf="showheartIcon"> ...
When I select a project from the drop-down list, it saves all the data from the selection. Please refer to the image below. function sample($con){ $select = "SELECT * FROM project_tbl"; $select_result = mysqli_query($con,$select); if (mysqli_n ...
I am currently working on creating a custom toolbox. I want the toolbox to slide in from the left when opened, so I added a transition from left=-1500px to left=0;, which works perfectly. However, when I attempted to add a minimization feature by adding a ...
I'm looking to place some text in front of a card hover zoom effect, but currently it appears behind the zoomed image upon hover. <div style="margin-top: 50px;" class="container imgzoom"> <div class="row ...
When using 'currency' in AngularJS, I noticed that a dollar symbol is displayed. How can I change this to show the required currency symbol based on different requirements? Currently, I am looking for information on how to display a rupee symbol ...
I'm encountering an issue with a function that is supposed to open a new window when a button is clicked. Strangely, on the first click, nothing happens, but on the second click, the window finally opens. Here's my code: Script <script src ...
While in debug mode, I am able to track which page is being accessed. Interestingly, whenever I use window.location or window.location.replace(..), the browser redirects to the specified page but then quickly returns to the original one! This strange beh ...
Does anyone know how this webpage achieves the effect of having a full-screen background that ends when scrolling down? I have noticed that the picture of the desert always covers my entire browser screen but is not a typical full-screen background as it ...
Imagine there are two buttons (Button 1 and Button 2) on a webpage (Page A). Clicking on either button will take you to the same external page (Page B). How can we ensure that Button 1 takes you to the top of Page B, while Button 2 automatically scrolls do ...
I've been on the hunt for hours, trying to pinpoint where the issue lies within my code. Despite scouring different resources and sites, I can't seem to figure it out. Whenever I click "Get JSON Data," nothing seems to display below. Can someone ...