css

How can I rotate a font icon 45 degrees?

by

The reason why the icon does not rotate in it’s ‘raw’ state is because it’s default display setting is inline. You cannot apply transforms to inline elements like this. To solve the problem just apply `display:inline-block”. @font-face { font-family: ‘Flaticon’; src: url(‘data:font/ttf;base64,AAEAAAANAIAAAwBQRkZUTWzLl7IAAAV4AAAAHEdERUYAMQAGAAAFWAAAACBPUy8yL7pL5QAAAVgAAABWY21hcMARI74AAAHAAAABSmdhc3D//wADAAAFUAAAAAhnbHlmwP2S0wAAAxgAAABwaGVhZARhaP0AAADcAAAANmhoZWED0gHFAAABFAAAACRobXR4BgAAHgAAAbAAAAAQbG9jYQA4AAAAAAMMAAAACm1heHAARwAoAAABOAAAACBuYW1liNt9UwAAA4gAAAGScG9zdJJ3apwAAAUcAAAAMQABAAAAAQAAIRWaJV8PPPUACwIAAAAAANGhFEAAAAAA0aEUQAAe/8AB4gHAAAAACAACAAAAAAAAAAEAAAHA/8AALgIAAAAAAAHiAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAEACUAAQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA4ADgAAHA/8AALgHAAEAAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAHgAAAAMAAAADAAAAHAABAAAAAABEAAMAAQAAABwABAAoAAAABgAEAAEAAgAA4AD//wAAAADgAP//AAAgAwABAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAEAHv/AAeIBwAAkAAAlIgcuASMiBy4BIyIHNTQmIgYdAScuAQ4BHwEeATsBMjY9ATQmAa0ODQMdExANBRsRDgwfLB8SDyshAg5zEjYYcS9CH9sHEhgIDxMIexYfHxbtFRADHSwQgRIaOyqBFh8AAAAAAAwAlgABAAAAAAABAAgAEgABAAAAAAACAAcAKwABAAAAAAADACQAfQABAAAAAAAEAAgAtAABAAAAAAAFAAsA1QABAAAAAAAGAAgA8wADAAEECQABABAAAAADAAEECQACAA4AGwADAAEECQADAEgAMwADAAEECQAEABAAogADAAEECQAFABYAvQADAAEECQAGABAA4QBmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAGYAbABhAHQAaQBjAG8AbgAgADoAIAAxADMALQA2AC0AMgAwADEANQAARm9udEZvcmdlIDIuMCA6IGZsYXRpY29uIDogMTMtNi0yMDE1AABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABAAAAAEAAgECBmhhbmQxMAAAAAAAAAH//wACAAEAAAAOAAAAGAAAAAAAAgABAAMAAwABAAQAAAACAAAAAAABAAAAAMmJbzEAAAAA0aEUQAAAAADRoRRA’) format(‘truetype’); font-weight: normal; font-style: normal; } [class^=”flaticon-“]:before, [class*=” flaticon-“]:before, [class^=”flaticon-“]:after, [class*=” flaticon-“]:after { …

Read more

use custom fonts with wkhtmltopdf

by

Since it is a Google Web font you need not to write @font-face in you style sheet just use following link tag in your source code: <link href=”http://fonts.googleapis.com/css?family=Jolly+Lodger” rel=”stylesheet” type=”text/css”> and <style type = “text/css”> p { font-family: ‘Jolly Lodger’, cursive; } </style> will work. By the way, in your code you are defining @font-face …

Read more

Looping Animation of text color change using CSS3

by

Use keyframes and animation property p { font-family: monospace; font-size: 3em; animation: color-change 1s infinite; } @keyframes color-change { 0% { color: red; } 50% { color: blue; } 100% { color: red; } } <p>lorem ipsum</p> CSS With Prefixes p { -webkit-animation: color-change 1s infinite; -moz-animation: color-change 1s infinite; -o-animation: color-change 1s infinite; -ms-animation: …

Read more

Use a space or greater than sign > in CSS selector? [duplicate]

by

No they are completely different, using > selects a child element whereas using a space will select a nested element at any level. For example… Using ␣/space in the selector… <div class=”welcome”> <section> <div>This will be selected</div> </section> <div>This will be selected as well</div> </div> So here, the selector having space will target the div …

Read more

Changing the order of Grid Item stacking in material-ui

by

Edit: I have revised the answer for MUI Core v5 <Grid container spacing={16} justify=”flex-start”> <Grid item xs={12} sm={6} md={4} lg={4}> <Paper> <h1>{1}</h1> </Paper> </Grid> <Grid item xs={12} sm={6} md={4} lg={4} order={{ xs: 3, sm: 2 }}> <Paper> <h1>{2}</h1> </Paper> </Grid> <Grid item xs={12} sm={6} md={4} lg={4} order={{ xs: 2, sm: 3 }}> <Paper> <h1>{3}</h1> </Paper> …

Read more

Make a grid column span the entire row

by

Here are two interesting sections in the CSS Grid specification: 7.1. The Explicit Grid Numeric indexes in the grid-placement properties count from the edges of the explicit grid. Positive indexes count from the start side, while negative indexes count from the end side. also here… 8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties …

Read more