Use the pictures provided as decoration

01 / 05

You do not have to draw the decorations

Small marks (icons) are usually materials somebody else prepared, brought in and used. You need not draw them.

There are three pictures to hand in this course. Fetching one from somewhere on the internet is not something we do.

/samples/neko.svg
/samples/onigiri.svg
/samples/hana.svg

02 / 05

Match their sizes

Materials often come at all sorts of sizes. Set both width and height to line them up before you use them.

For an icon, 20px to 32px is about right.

.icon {  width: 24px;  height: 24px;}

03 / 05

Line the height up with the text

Put an img beside some text and the bottoms line up while the tops do not.

Set vertical-align: middle; and the middle of the picture lines up with the middle of the text.

.icon {  vertical-align: middle;}

04 / 05

Stick it on as a background

There is also a way to put an icon behind a box rather than writing an img. Handy when you want a small picture to the left of some writing.

The trick is to move the words over with padding-left and show the picture in the space you opened.

.item {  padding-left: 44px;  background-image:    url(/samples/hana.svg);  background-repeat: no-repeat;  background-position: 12px center;  background-size: 24px 24px;}

05 / 05

Which one to pick

A picture that carries meaning goes in an img, plain decoration goes in the background. That is the rule of thumb.

A background picture is not read aloud, so putting a picture that carries meaning in the background makes that information disappear. Have a go.