Icons and Images both are a graphical representation of the things that we want to describe but Icons have a different objective than normal Images. Icons are a general representation of an idea whereas Images are more specific. In CSS, Icons are defined using a different set of properties than normal Images. We don’t use the height and width property to define the size of an Icon as we do for an Image. Hence we need to use different CSS properties to add animations to the Icons. This tutorial will demonstrate how to reduce the size of an Icon during CSS Animations.
In this article, we will be using font-awesome Icon library to demonstrate changes in its size during an animation. We assume that you are familiar with HTML and CSS and have a basic knowledge of CSS Animations.
Step 1: Install Browsersync using npm. We will use Browsersync to start a server and provide a URL to view the HTML site and CSS Animation and to load font-awesome using CDN (Content Delivery Network). We will install Browsersync globally.
npm install -g browser-sync
Step 2: Create an index.html file and an index.css file in your project root folder.
- index.html: Add the following code in that file.
Step 3: We will add CSS Animation to the font-awesome Icon to reduce the size of the Icon. The same approach can also be applied to increase the size of the Icon during a CSS animation. CSS does not have the capability to modify the DOM structure. It can only change the presentation of the HTML DOM. Hence when using font-awesome Icons, we can set the initial size of the Icon using the pre-defined classes provided by the font-awesome library as shown in the code, but we cannot change the size of the Icon during a CSS animation using these classes. To change the size of the Icon, we will have to apply CSS styling to the HTML element as done in the above code. Some examples of pre-defined classes which can be used to set the initial size of the font-awesome Icons are fa-xs, fa-lg, fa-2x, etc.
- index.css: Add the following Snippet in that file.
Step 4: To launch the application using Browsersync, run the following command in the project directory or you can run the HTML file directly into your browser.
browser-sync start --server --files "*"
Output: This starts Browsersync in server mode and watches all the files within the directory for changes as specified by the * wildcard. The application will be launched at http://localhost:3000/ by default.
- How to replace dropdown-toggle icon with another default icon in Bootstrap ?
- How to style icon color, size, and shadow by using CSS ?
- How to count number of notification on an icon?
- Bootstrap | Close Icon for dismissing content with Examples
- How to add icon logo in title bar using HTML ?
- CSS to put icon inside an input element in a form
- How to display icon next to show/hide text on button?
- How to place Font Awesome icon to input field ?
- How to Create an Image Overlay Icon using HTML and CSS ?
- How to translate an image or icon by hovering over it?
- How to hide “Image not found” icon when source image is not found?
- How to use mat-icon in angular?
- How to use font awesome icon as a cursor ?
- How to remove the default arrow icon from a dropdown list?
- How to convert the hamburger icon of navigation menu to X on click ?
- Bulma | Icon
- Semantic-UI | Icon
- How to put the text inside of a created icon?
- How to use animation on favicon image ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.