Combine 2 icons into one and generate a svg file. Eg. Combine "data" icon and "robot" icon into "data bot" icon.
- Find svg icons using these pages: icomoon, flaticon,... Down as
.svg
format. You should choose icons with single color.
- Using mediamodifier.com to combine them. Then download as
.jpg
files. Yep, with free account, you can only download this type of file.
- Using remove.bg to remove background and then save a new file in
.png
format.
- Using pngtosvg.com to convert to
.svg
file. Don't forget to reduce the number of color to 1 before clicking "Generate".
- Finally, download you desired svg icon.
1<div>
2 <svg style="display: block;" height="100" width="100"></svg>
3</div>
Inline-block elements (like
svg
, img
) sit on the text baseline. The extra space is for character descenders (eg. the tail of "y", "g",...) => We can use verticle-align: top
if we wanna keep it inline
or inline-block
.- Font ligatures: When you type
= + >
, it becomes⇒
.
👇 Source.
1<div>
2 <i id="icon" class="far fa-copy"></i>
3 <span id="text">Text</span>
4</div>
1div {
2 display: inline-block;
3 height: 1rem;
4}
5#text, #ico {
6 line-height: 1rem;
7}
8#ico {
9 vertical-align: middle;
10}
Just add
autofocus
into the <input>
tag.1<input name="q" class="search" type="search" placeholder="..." autofocus>
And make it into 1 if the screen is small.
1<div class="two-columns-list">
2 <ul>
3 <li></li>
4 </ul>
5</div>
1.two-columns-list {
2 @media (min-width: $grid-md) {
3 @include column-count(2);
4 & > li {
5 padding-right: 10px;
6 }
7 }
8}
When I use bootstrap, the
@media
is not working when I change to mobile use, try to add below line to <head>
1<meta name="viewport" content="width=device-width" />
- Sia Karamalegos -- Making Google Fonts Faster.
- The SASS way -- If-For-Each-While in SCSS.