Creating Dynamic Icons with Pug, SCSS, and JS

Creating Dynamic Icons with Pug, SCSS, and JS

 Introduction:

In this tutorial, we will explore how to create more fancy icon buttons using Pug (formerly Jade), SCSS (Sassy CSS), and JavaScript. We will utilize Font Awesome icons and add dynamic effects to make our buttons visually appealing and interactive. Let's dive into the code and build some stylish icon buttons!

Prerequisites: Before you begin, ensure you have a basic understanding of Pug, SCSS, and JavaScript. Additionally, make sure to include Font Awesome in your project to use the icons.

Pug Markup: First, let's set up the Pug structure for our icon buttons. We'll create a container to hold our buttons and define individual icons for each button.

  
    .container
  .content
    h1 CSS3 Icons
    .icon-container
      .icon.icon-fill
        i.fa.fa-home
      .icon.icon-enter
        i.fa.fa-user
      .icon.icon-expand 
        i.fa.fa-bars
      .icon.icon-collapse
        i.fa.fa-sign-in
      .icon.icon-rotate
        i.fa.fa-phone

  

SCSS Styles: Next, let's apply the SCSS styles to customize the appearance of our icon buttons and add dynamic effects.

    // Define variables
$icon-size: 60px;
$border-radius: 0.5; // You can adjust this value for different border radius percentages

// Colors
$background: #2d2c3e;
$background-b: #2d2c3e;
$green: #16A085;
$red: #C82647;
$green-l: #8CC63F;
$orange: #EB9532;
$purple: #7E3661;
$white: #FFFFFF;

// Apply general styles
body {
  // Add general body styles here
}

.container {
  // Add styles for the container here
}

.content {
  // Add styles for the content here
}

h1 {
  // Add styles for the heading here
}

.icon-container {
  // Add styles for the icon container here
}

.icon {
  // Add styles for the icon buttons here

  // Pseudo-elements for icons
  &::before, &::after {
    // Add styles for pseudo-elements here
  }

  i {
    // Add styles for the icons here
  }
}

// Additional styles for each button
.icon-fill {
  // Add styles for the "icon-fill" button here
}

.icon-enter {
  // Add styles for the "icon-enter" button here
}

.icon-expand {
  // Add styles for the "icon-expand" button here
}

.icon-collapse {
  // Add styles for the "icon-collapse" button here
}

.icon-rotate {
  // Add styles for the "icon-rotate" button here
}

  

JavaScript: For this example, JavaScript is not required as the provided code only involves CSS for the dynamic effects. The code commented as "Bug" is a note related to the style matching for Icon #3, and it does not require JavaScript to be fixed.

Conclusion: In this tutorial, we explored how to create more fancy icon buttons using Pug, SCSS, and Font Awesome icons. By applying CSS styles and effects, we achieved visually appealing buttons with dynamic hover effects. You can use these techniques to create engaging icon buttons for various parts of your website, such as navigation menus, social media links, or call-to-action buttons.

Feel free to experiment with different icons and styles to match your website's design and theme. You can also add JavaScript functionality to make the buttons interactive, such as triggering actions or animations on button clicks. Have fun creating your own fancy icon buttons and elevate the user experience on your website!