The last modifications of this post were around 1 year ago, some information may be outdated!
This is a low-quality note, read at your own risk!
Create and combine svg icons
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
.svgformat. You should choose icons with single color. - Using mediamodifier.com to combine them. Then download as
.jpgfiles. 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
.pngformat. - Using pngtosvg.com to convert to
.svgfile. Don't forget to reduce the number of color to 1 before clicking "Generate". - Using Icomoon to centralize the svg paths.
- Finally, download you desired svg icon.
Get rid of extra space: svg in div
<div>
<svg style="display: block;" height="100" width="100"></svg>
</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.
Terms
- Font ligatures: When you type = + >, it becomes
⇒.
Verticle align fontawesome icon and text
👇 Source.
<div>
<i id="icon" class="far fa-copy"></i>
<span id="text">Text</span>
</div>div {
display: inline-block;
height: 1rem;
}
#text, #ico {
line-height: 1rem;
}
#ico {
vertical-align: middle;
}Auto focus on an input field when page loads
Just add autofocus into the <input> tag.
<input name="q" class="search" type="search" placeholder="..." autofocus>Separate a list into 2 columns
And make it into 1 if the screen is small.
<div class="two-columns-list">
<ul>
<li></li>
</ul>
</div>.two-columns-list {
@media (min-width: $grid-md) {
@include column-count(2);
& > li {
padding-right: 10px;
}
}
}@media not working
When I use bootstrap, the @media is not working when I change to mobile use, try to add below line to <head>,
<meta name="viewport" content="width=device-width" />Useful URLs
- Sia Karamalegos -- Making Google Fonts Faster.
- The SASS way -- If-For-Each-While in SCSS.
💬 Comments