html - One class override the property of another class -
in code given below, want display font-size property on class: flip-menu-main-icon
overridden font-size property
on class fa
.
how can solve problem?
html code:
.fa { display: inline-block; font: normal normal normal 14px/1 fontawesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .flip-menu-main-icon { /* margin-left: 10%; */ font-size: 18px; float: none; line-height: 2.5rem; margin-right: 0; margin-left: 0; position: relative; top: 0; min-width: 1.5rem; list-style-type: none; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <i class="flip-menu-main-icon fa fa-glass "></i><span class="flip-menu-text">dashboard</span>
use class
.fa.flip-menu-main-icon { font-size: 29px; }
Comments
Post a Comment