Icons in controls

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Icons in controls—the ideas, syntax, and habits you need before moving on in Bulma.

Bulma offers a lighter component model when Bootstrap feels too heavy or dated.

You will apply Icons in controls in contexts like: Smaller marketing sites, internal dashboards, and projects that need quick responsive layout with minimal JS.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

Place icons inside inputs with has-icons-left or has-icons-right on the control wrapper, then add a child span.icon. The input needs matching padding—Bulma handles this when structure is correct.

Icon sets

Bulma does not ship an icon font. Teams pair Bulma with Font Awesome, Heroicons as inline SVG, or Material Symbols. Keep decorative icons aria-hidden="true"; meaningful icons need text alternatives.

Clickable icons

Password reveal or clear buttons should be real button elements inside the control, not bare spans, so keyboard users can activate them.

Self-check

Which class aligns an icon on the left inside an input?
Why should icon-only controls still have accessible names?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

icon-left spacing issue?
Icon decorative vs informative?

No discussion yet. Be the first to ask a question.