How about organizing a bunch of icons at once?

I decided to use this unique font for my design. I wanted to create a visual representation of the sun and clouds, making sure they always move together regardless of window size:

.sun:before{content:'\f113'; font-size:7em;color: #fbac13; font-family: iconvault;font-style:normal;-webkit-animation: rotation 5s linear infinite}

.cloud:after{content:'\f106'; font-size:7em; ; font-family: iconvault;font-style: normal;color: rgb(146, 157, 173);-webkit-animation: move 2s linear alternate infinite;text-shadow: 6px 5px 10px white,-5px -5px 10px white,-5px -5px 20px white,-5px -5px  20px white;}

@-webkit-keyframes rotation {from {transform: rotate(0deg);}to {transform: rotate(90deg);}}
@-webkit-keyframes move {from {transform: translate(-20px) ;}to {transform: translate(0px) }}

I was confused about the usage of absolute, relative, fixed, and static in this context as the website utilized absolute.

Please forgive my novice question.

Note: I chose not to use before with after as I may need to incorporate more than two icons (such as a sun, cloud, snowflake, or thunder).

css

Answer №1

Does this capture what you are looking for?

I'm unsure if this method is the most efficient, but it does the job:

html:

<div class="icon-group">
    <div class="icon sun"></div>
    <div class="icon cloud"></div>
</div>

css:

.icon {
    display: inline-block;
}

.icon-group {
    display: inline-block;
    white-space: nowrap;
}

Edit

You can experiment with something similar to this for arranging your icons: Example of Stacked Icons

html:

<div class="icon-stack">
    <div class="sun"></div>
    <div class="cloud"></div>
</div>

css:

.cloud {
    position: absolute;
    left: 0;
    top: 20px;
}

.icon-stack {
    position: relative;
    display: inline-block;
    border: 1px solid #ddd;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Removing CSS from a button inside a jQuery Mobile popup: a step-by-step guide

Within a jQM dialog, I have a pair of buttons: <a href="#" data-role="button" data-inline="true">Yes</a><a href="#" data-role="button" data-inline="true" data-rel="back">No</a> These buttons are automatically styled by jQM, incorp ...

jquerycssjquery-mobile

Swapping mouse cursor using JavaScript

Currently, I am working on a painting application in JavaScript that utilizes the Canvas Object. I would like to customize the mouse cursor when it hovers over the Canvas object. Can anyone advise me on how to accomplish this? ...

javascriptcssmouse-cursor

Utilize jQuery to display a list of defined CSS classes based on a regular expression, implementing a targeted CSS strategy to prevent any

I have defined a set of CSS classes in app.css: .eventcolor-1{background:rgba(249, 115, 0);} .eventcolor-2{background:rgba(14, 48, 71, 0.99);} .eventcolor-3{background:rgba(16, 130, 140, 0.99);} .eventcolor-4{background:rgba(41, 91, 167, 0.99);} .eventcolo ...

javascriptcss

Personalize Angular material mattooltip and style information for display in tooltip

I need assistance displaying data in a tooltip in JSON format similar to the image provided. Although I can load the data in the tooltip, it does not appear formatted like the attached picture. <ng-container matColumnDef="Alert"> &l ...

javascripthtmlcssangularangular-material

Centering the searchbar in the Bootstrap 4 navbar

I'm finding it difficult to center my search bar inside my navigation. I've experimented with different options like mr-auto and ml-auto or mx-auto, but the element just won't budge. I want to avoid using specific pixel values as it may affe ...

htmlcsstwitter-bootstrapbootstrap-4

Guide to Using Bootstrap 4 for User Information: Best Practices and Steps to Follow

I'm currently working on a design layout using bootstrap 4 alpha version and I must say, the cards feature is quite impressive. Specifically, I have this section within the layout where I want to align the phone number and email address info on the s ...

htmlcsslayoutsassbootstrap-4

Color remains unchanged for selected value in dropdown menu

I'm facing a challenge in changing the color of the selected value in the dropdown menu. Each value has a different color, but when I select one, it reverts back to black. .appt-status select option[value="0"] { color: #3EA47B; } .appt-status o ...

cssbootstrap-4

Fixing the Jquery animation glitch triggered by mouseover and mouseout

In my project, I have implemented a small mouseover and mouseout functionality. The challenge I am facing is that I need to keep the mouseout function using animate() instead of css() for specific reasons. The issue arises when I quickly do a mouseover fo ...

javascriptjqueryhtmlcssanimation

Conceal Choices During Search using jQuery Select2

I'm having trouble figuring out how to make the Select2 plugin work for my specific color selection feature. My goal is to allow users to choose 5 colors from a list, including an "Other" option. When the user selects "Other", they should be able to ...

jquerycssjquery-select2

There appears to be an error in the @media CSS code that needs to be corrected

Attempting to use an @media query to adjust the height of an element on my website for mobile users. However, I am struggling to make the code work properly. Any assistance in understanding what mistake I'm making and guiding me in the correct directi ...

cssmobilewidth

Is there a way to ensure that the table headers are printed on every page when using Google Chrome

When printing documents in Chrome browser, the table header (thead) does not appear on every page. I want to ensure that the table header is displayed on each printed page, just like it is done with IE and Firefox. However, Chrome does not support this fea ...

javascriptjqueryhtmlcssgoogle-chrome

html tables cannot be aligned row by row

I am attempting to display messages row by row and then show a text box for input to send a message. The issue I am facing is that I can display the messages row by row, but the text box appears next to the displayed messages horizontally rather than at th ...

htmlcss

Tips for customizing the appearance of Angular Material select drop down overlay

In my project, there is an angular component named currency-selector with its dedicated css file defining the styling as shown below: .currency-select { position: absolute; top: 5px; right: 80px; z-index: 1000000; color: #DD642A; f ...

htmlcssangularangular-material2

Slick Slider isn't compatible with Bootstrap Tab functionality

I'm having an issue with using slick slider within a Bootstrap tab menu. The first tab displays the slick slider correctly, but when I switch to the second tab, only one image is shown. How can I resolve this problem? <!DOCTYPE html> <html ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Adjust the size of the container DIV based on the content within the child DIV

I have been searching for a solution to my question without success. Here is the issue: I have a DIV that acts as a container for a Post in my project. Inside this post are classes for the poster avatar, name, timestamp, text, and more. The problem arise ...

htmlcsssize

Is it possible to smoothly transition from one background image to another in CSS or JavaScript?

Most tutorials I've come across suggest using a background image with a linear gradient overlay, but that solution doesn't suit my needs: I have two adjacent divs with background images, slightly overlapping by 50px. I wish to create a gradient ...

javascripthtmlcsslinear-gradients

What is the process for setting a background image in a React application?

I need help figuring out how to add a background image to my React app. I've searched for solutions on StackOverflow, but I'm still unsure. The image I want to use is named background.jpeg and it's located in the same folder as my App.js fil ...

htmlcssreactjs

Showcasing two columns side by side in the first row and one column beneath them in the second row within a single tr

Here is the code snippet I created: <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td& ...

javascriptjqueryhtmlcss

Tips for transferring input values between two PHP pages

I need to save various input values in a MySQL database, such as first name, last name, phone number, and mobile number. With a select query, I can retrieve all the entries from the database and display them on a single webpage. When a user clicks on a sp ...

phpmysqlhtmlcss

Issue with iPad CSS floats causing layout problems?

Having a css challenge with the layout on ipad for this particular website: When viewing on a browser, the social media icons align correctly to the right. However, on an iPad or iPhone, they are not aligned all the way to the right. Is there anything tha ...

htmliphonecssipad