legacy-address-book
legacy-assessments
legacy-balance
legacy-banking
legacy-batch
legacy-bulk-receipting
legacy-calendar
legacy-cdm
legacy-checked
legacy-close
legacy-cog
legacy-consult
legacy-discharge
legacy-education
legacy-envelope
legacy-health-summary
legacy-immunisations
legacy-inbox
legacy-ledger
legacy-letter-other
legacy-letter-referral
legacy-letter-specialist
legacy-letter-writer
legacy-measurements
legacy-medicare-color
legacy-medication-precautions
legacy-metabolic
legacy-mhr
legacy-next
legacy-nurse
legacy-obgyn
legacy-pathology
legacy-patient
legacy-prepare-invoice
legacy-prescription
legacy-printer
legacy-queue
legacy-radiology
legacy-recalls
legacy-reports
legacy-scanner
legacy-smd
legacy-store
legacy-time
legacy-visit
legacy-wc-batching
legacy-workers-compensation
Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon class as a container:
Usage
<i class="hx-icon icon-helix"></i>
The icon container will take up exactly
1.5rem x 1.5rem. The icon itself is sized at
21px.
Font Awesome icons use a font-size of 28px by default, and are best rendered when using multiples of 7. The icon container is always slightly bigger than the font-size used:
| Class | Font-size | Container size | |
|---|---|---|---|
hx-icon is-small | 14px | 1rem x 1rem | |
hx-icon | 21px | 1.5rem x 1.5rem | |
hx-icon is-medium | 28px | 2rem x 2rem | |
hx-icon is-large | 42px | 3rem x 3rem |