Newbe Dev Stack

Answer : You can use both Font Awesome and Github Octicons as a free alternative for Glyphicons. Bootstrap 4 also switched from Less to Sass, so you might integerate the font's Sass (SCSS) into you build process, to create a single CSS file for your projects. Also see https://getbootstrap.com/docs/4.1/getting-started/build-tools/ to find out how to set up your tooling: Download and install Node, which we use to manage our dependencies. Navigate to the root /bootstrap directory and run npm install to install our local dependencies listed in package.json. Install Ruby, install Bundler with gem install bundler , and finally run bundle install . This will install all Ruby dependencies, such as Jekyll and plugins. Font Awesome Download the files at https://github.com/FortAwesome/Font-Awesome/tree/fa-4 Copy the font-awesome/scss folder into your /bootstrap folder Open your SCSS /bootstrap/bootstrap.scss and write down the following SCSS code at the end of this fil...

Answer : Without Bootstrap: We'll get to Bootstrap in a second, but here's the fundamental CSS concepts in play in order to do this yourself. As beard of prey points out, you can do this with CSS by absolutely positioning the icon inside of the input element. Then add padding to either side so the text doesn't overlap with the icon. So for the following HTML: <div class=" inner-addon left-addon "> <i class="glyphicon glyphicon-user"></i> <input type="text" class="form-control" /> </div> You can use the following CSS to left and right align glyphs: /* enable absolute positioning */ .inner-addon { position: relative; } /* style icon */ .inner-addon .glyphicon { position: absolute; padding: 10px; pointer-events: none; } /* align icon */ .left-addon .glyphicon { left: 0px;} .right-addon .glyphicon { right: 0px;} /* add padding */ .left-addon input { padding-left: 30p...