Customize Your Icon with CSS to Stand Out

Here is some HTML code snippet

<div class="col-sm down-arrow">
  <i class="fas fa-arrow-right"></i>
</div>

I am able to accomplish this task using JavaScript

var width = $(window).width();
if (width <= 768) {
    $('.down-arrow').find('.fas').removeClass('.fas fa-arrow-right').addClass('.fas fa-arrow-down');
}
else
    $('.down-arrow').find('.fas').removeClass('.fas fa-arrow-down').addClass('.fas fa-arrow-right');

However, I prefer to achieve it with CSS as the current solution does not respond effectively when screen size is smaller than 768px

I attempted to use content:"\f063" font-family:FontAwesome but unfortunately, it did not produce the desired outcome

Your guidance would be greatly appreciated

Thanks a lot

css

Answer №1

Indeed, it is possible to achieve this using CSS and media queries exclusively. I have personally implemented this approach before, although I must acknowledge that it may not be considered the most optimal practice. Therefore, please bear that in mind.

The concept involves defining font awesome styles within a custom class and dynamically adjusting the before value based on the screen width.

.custom-fa-icon {
  font-family: "Font Awesome 5 Free";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
}
.custom-fa-icon::before {
  content: "\f061"; /* Represents the right arrow */
}
@media (max-width:768px) {
  .custom-fa-icon::before {
    content: "\f063"; /* Switches to the down arrow for smaller screens */
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<div class="col-sm down-arrow">
  <i class="custom-fa-icon"></i>
</div>

Answer №2

I stumbled upon a nifty solution using JavaScript.

Simply attach an EventListener for the 'resize' event

Check out the JavaScript snippet below:

window.addEventListener('resize', ToggleIcon);
function ToggleIcon(){
    var screenWidth = $(window).width();
    if (screenWidth <= 768) {
        $('.expand-icon').find('.fas').removeClass('.fas fa-chevron-right').addClass('.fas fa-chevron-down');
    }
    else
        $('.expand-icon').find('.fas').removeClass('.fas fa-chevron-down').addClass('.fas fa-chevron-right');
}

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

Bootstrap - the input group button is designed to align to the right side

Currently, I am in the process of constructing a navigation bar for a website that includes a search bar and a grouped button. Everything functions properly when viewed on a desktop, but as soon as I switch to mobile view and the collapsible menu is activa ...

htmlcsstwitter-bootstrap

Ways to position one div below another div

I need the #blue div positioned below the #green div The #blue div should have a margin-top: -10px; property <style> #red{ width: 400px; border: 1px solid red; } #green{ width: 100%; height: 100px; ...

csshtmlmargin

Receiving a 502 Bad Gateway error when attempting to request a CSS file via HTTPS

After recently adding SSL to some pages on my website, I encountered an issue when trying to call a secured web page <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="https:/ ...

asp.netcssssliis-7https

H4 Heading in CSS/Bootstrap not aligning centrally

Having some trouble centering a <h4> title within a bootstrap modal. Here is the code snippet: <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="moda ...

cssbootstrap-4

What is the best method to align subtitles in an HTML5 video player? Tips for enhancing the style of subtitles/captions

I am facing an issue where the subtitles in my video do not play in the middle-bottom as desired. I have tried to style them using CSS but they just won't align to the center. The subtitles always appear at the bottom left of the video. Here is the H ...

htmlcsshtml5-videocentervideo-subtitles

Center-align the table element

I've been struggling to center align this table element, specifically the one containing the square, but nothing seems to be working. Can anyone lend a hand in fixing this issue? <table> <tbody> <tr> <td>TURKEY - SU ...

javascripthtmlcss

Switching the theme color from drab grey to vibrant blue

How can I change the default placeholder color in md-input-container from grey to Material Blue? I have followed the instructions in the documentation and created my own theme, but none of the code snippets seems to work. What am I doing wrong? mainApp. ...

javascriptcssangularjsangular-materialmean-stack

Tips for maintaining consistent styles in CSS for multiple websites

I am currently working on developing a customizable chatbot widget using react. The goal is to create a chatbot widget that can be easily integrated into any website, similar to the functionality of rasa-webchat. During testing on some websites, I encount ...

htmlcssreactjsmaterial-ui

Having RoundRect take the top left position of its rectangle container rather than its immediate parent (td)

I am currently troubleshooting an email-related issue that is specifically affecting Outlook In order to create a round Call To Action (CTA) button, I utilized Vector Markup Language (VML) The expected result should look like this: https://i.sstatic.net ...

htmlcssoutlookhtml-emailvml

CSS styling not functioning properly

After spending a considerable amount of time on this issue... <div id="pager" style="top: 5px; position: relative; " class="pager" > <form> <img src="http://tablesorter.com/addons/pager/icons/first.png" alt="first" class="first" ...

htmlcsstablesorter

Unnecessary spacing found within the side navigation menu

Recently, I decided to practice my web development skills by creating a basic webpage using flexbox for the topnav and CSS Grid 12 column layout for the main content. Everything was going smoothly until I encountered some extra whitespace in the sidenav se ...

htmlcssflexboxcss-grid

What is the best method to eliminate the .invisible div entirely from your website?

I want to hide a select tag and only display it when necessary. To achieve this, I tried using the .invisible class from Bootstrap, but the issue is that even when hidden, it still takes up space. <div class="row invisible"> <div class="fo ...

htmlcssbootstrap-4

Add a Font Awesome 5 icon to serve as the background of a Bootstrap 4 card

How can I utilize a Font Awesome 5 icon as the background image for a card using Bootstrap-4? After trying numerous solutions found online, I am still unable to get it to work. My environment consists of Angular2 (v8) in conjunction with Bootstrap 4. ...

csstwitter-bootstrapbootstrap-4font-awesomefont-awesome-5

CSS animations are failing to work properly in Firefox due to a pseudo-element issue

I'm encountering a problem with my CSS animations in Firefox. Specifically, the animations are not working on a pseudo element (:after) while they work perfectly fine on other browsers. Below is where the animations are being applied: :after { d ...

htmlcssfirefoxanimation

Styling child elements in Angular using css from its parent element

I have a question: Regarding the structure below <component-parent> <first-child> <second-child> <third-child></third-child> </second-child> </first-child> </component-parent> Now I want t ...

cssangular

When pressed, the button changes color to a vibrant shade of blue, and not just a simple outline

I'm experiencing an issue with a button that turns blue when the user holds onto it for a while on mobile. You can see an example in the image below: https://i.sstatic.net/VmnZ8.png Adding ::selected or outline did not resolve the problem as the ent ...

javascripthtmlcss

How can I use JavaScript to loop through a specific attribute?

I have implemented ckeditor inline on a website I created. While it allows me to save data to a database, the issue arises when ckeditor automatically applies its own classes and attributes to certain elements where contenteditable is enabled. It also re ...

javascripthtmlcssloopsckeditor

Is it possible for URLs in CSS Custom Properties to be relative to the CSS file where they are defined?

I have a CSS library with resources like images and fonts that can be accessed from anywhere via CDN. I am trying to create URLs for these resources as Custom CSS Properties, relative to the library. <!-- https://my.server/index.html --> <link rel ...

htmlcss

Changing direction of arrow upon dropdown menu opening with JavaScript

I have developed a piece of code that enables users to click on a div in order to reveal a dropdown menu containing radio buttons. My goal is to make the arrows rotate 180 degrees when the dropdown menus are opened, and then return to their original positi ...

javascripthtmlcss

Struggling to align a div container in the center

I'm having trouble centering my main container on the page. No matter what I try, it still seems to be floating to the left... I'm wrapping all my content in its own Div because I'm using a jQuery cycle background and I want to keep my conte ...

jqueryhtmlcsscontainerscenter