Category: html

Font awesome naming convention

Here is some collections for working with font-awesome Source: https://fontawesome.com   1- Rotating icons <div class=”fa-2x”> <i class=”fa fa-font-awesome”></i> <i class=”fa fa-font-awesome fa-rotate-90″></i> <i class=”fa fa-font-awesome fa-rotate-180″></i> <i class=”fa fa-font-awesome fa-rotate-270″></i> <i class=”fa fa-font-awesome fa-flip-horizontal”></i> <i class=”fa fa-font-awesome fa-flip-vertical”></i> </div> Source: https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons 2- Sizing icons <i class=”fas fa-stroopwafel fa-xs”></i> <i class=”fas fa-stroopwafel fa-sm”></i> <i class=”fas fa-stroopwafel fa-lg”></i> …


Websites to use free images & logos – References for logos, web graphics, design

Following are some websites where we can use freely: Unsplash Loremflickr Freepik Below are the reference websites for graphic design and web design: 99designs.com Behance.net (list of mostly voted websites, a good reference for web designers) List will be updated with more! Enjoy working 🙂


Carousel View – Bootstrap 4 and Angular 6

You would need something like this for working with Carousel view file.component.html <div class=”carousel slide “data-ride=”carousel”>   <ngb-carousel>     <ng-template ngbSlide>        <div class=”carousel-caption”>           <h3>First slide label</h3>           <p>Text 1.</p>        </div>        <img src=”/assets/images/img1.png”/>      </ng-template>   …


Div – Bootstrap4 and Angular6

How to – collapse for Bootstrap 4 and Angular 6

In order to make a navbar collapse in boostrap 4 to be used with Angular 6, following things need to be done: file.html <nav class=”navbar” role=”navigation”>  <a class=”navbar-brand” href=”#” title=”GreenTSharing” target=”_blank”><img class=”logo”  src=”/assets/images/logo.png” id=”logo” /></a>   <button type=”button” class=”navbar-toggler” data-toggle=”collapse”  (click)=”isNavCollapsed = !isNavCollapsed” [attr.aria-expanded]=”!isNavCollapsed” aria-controls=”bs-example-navbar-collapse-1″ aria-label=”Toggle navigation”>     <span class=”navbar-toggler-icon”></span>   </button>   <div …