Our great sponsors
-
iconify
Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (over 150 icon sets and 200k icons). SVG framework, React, Vue and Svelte components!
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
And there you have it, our bottom navigation with only HTML/CSS. For more variation, you can checkout my repo here, and let me know if it helps or if I’m missing something in the comments below.
To start our project we need to create a file called index.html. Inside our index.html there’s an import link to iconify for our icons, two files CSS called base.css and bottomnav.css, and of course our .bottomnav. Inside the .bottomnav, there are four a href tags with a class .active for if the link is active. Inside each of the a href tag, there’s an icon and the name of the a href inside the span tag.
Related posts
- Show HN: I built a search engine for 200k open source icons
- How to build a Sign Up with Third-Parties Component Using TailwindCSS
- How to Build a Search Bar Using TailwindCSS
- Create NextJs Portfolio⭐ Website using Tailwind-CSS and Framer-motion
- This is a minimal icon set that you can add into your project. It's called Hicon!