|
1 | 1 | ---
|
2 | 2 | title: Icon
|
3 |
| -subtitle: "Bulma is compatible with <strong>all icon font libraries</strong>: <a href=\"https://fontawesome.com/\">Font Awesome 5</a>, <a href=\"http://fontawesome.io/\">Font Awesome 4</a>, <a href=\"https://materialdesignicons.com\">Material Design Icons</a>, <a href=\"https://useiconic.com/open\">Open Iconic</a>, <a href=\"http://ionicons.com/\">Ionicons</a> etc." |
| 3 | +subtitle: "Bulma is compatible with <strong>all icon font libraries</strong>: <a href=\"https://fontawesome.com/\">Font Awesome 5</a>, <a href=\"http://fontawesome.io/\">Font Awesome 4</a>, <a href=\"https://materialdesignicons.com\">Material Design Icons</a>, <a href=\"http://ionicons.com/\">Ionicons</a>, etc." |
4 | 4 | fontawesome4: true
|
5 |
| -iconic: true |
6 | 5 | ionicons: true
|
7 | 6 | mdi: true
|
8 | 7 | layout: documentation
|
|
751 | 750 | </tbody>
|
752 | 751 | </table>
|
753 | 752 |
|
754 |
| -{% include elements/anchor.html name="Open Iconic" %} |
755 |
| - |
756 |
| -<div class="content"> |
757 |
| - <p> |
758 |
| - Here is how the <code>icon</code> container can be used with <a href="https://useiconic.com/open">Open Iconic</a>. |
759 |
| - </p> |
760 |
| -</div> |
761 |
| - |
762 |
| -<table class="table is-bordered"> |
763 |
| - <thead> |
764 |
| - <tr> |
765 |
| - <th>Container class</th> |
766 |
| - <th>Container size</th> |
767 |
| - <th>Iconic class</th> |
768 |
| - <th>Icon size</th> |
769 |
| - <th>Result</th> |
770 |
| - </tr> |
771 |
| - </thead> |
772 |
| - <tbody> |
773 |
| - <tr> |
774 |
| - <td> |
775 |
| - <code>icon is-small</code> |
776 |
| - </td> |
777 |
| - <td> |
778 |
| - <code>1rem x 1rem</code> |
779 |
| - </td> |
780 |
| - <td> |
781 |
| - <code>oi [data-glyph=puzzle-piece]</code> |
782 |
| - </td> |
783 |
| - <td> |
784 |
| - <code>1em</code> |
785 |
| - </td> |
786 |
| - <td class="bd-icon-size"> |
787 |
| - <span class="icon is-small"> |
788 |
| - <span class="oi" data-glyph="puzzle-piece"></span> |
789 |
| - </span> |
790 |
| - </td> |
791 |
| - </tr> |
792 |
| - <tr> |
793 |
| - <td> |
794 |
| - <code>icon</code> |
795 |
| - </td> |
796 |
| - <td> |
797 |
| - <code>1.5rem x 1.5rem</code> |
798 |
| - </td> |
799 |
| - <td> |
800 |
| - <code>oi [data-glyph=puzzle-piece]</code> |
801 |
| - </td> |
802 |
| - <td> |
803 |
| - <code>1em</code> |
804 |
| - </td> |
805 |
| - <td class="bd-icon-size"> |
806 |
| - <span class="icon"> |
807 |
| - <span class="oi" data-glyph="puzzle-piece"></span> |
808 |
| - </span> |
809 |
| - </td> |
810 |
| - </tr> |
811 |
| - <tr> |
812 |
| - <td> |
813 |
| - <code>icon is-medium</code> |
814 |
| - </td> |
815 |
| - <td> |
816 |
| - <code>2rem x 2rem</code> |
817 |
| - </td> |
818 |
| - <td> |
819 |
| - <code>oi [data-glyph=puzzle-piece]</code> |
820 |
| - </td> |
821 |
| - <td> |
822 |
| - <code>1em</code> |
823 |
| - </td> |
824 |
| - <td class="bd-icon-size"> |
825 |
| - <span class="icon is-medium"> |
826 |
| - <span class="oi" data-glyph="puzzle-piece"></span> |
827 |
| - </span> |
828 |
| - </td> |
829 |
| - </tr> |
830 |
| - <tr> |
831 |
| - <td> |
832 |
| - <code>icon is-large</code> |
833 |
| - </td> |
834 |
| - <td> |
835 |
| - <code>3rem x 3rem</code> |
836 |
| - </td> |
837 |
| - <td> |
838 |
| - <code>oi [data-glyph=puzzle-piece]</code> |
839 |
| - </td> |
840 |
| - <td> |
841 |
| - <code>1em</code> |
842 |
| - </td> |
843 |
| - <td class="bd-icon-size"> |
844 |
| - <span class="icon is-large"> |
845 |
| - <span class="oi" data-glyph="puzzle-piece"></span> |
846 |
| - </span> |
847 |
| - </td> |
848 |
| - </tr> |
849 |
| - </tbody> |
850 |
| -</table> |
851 |
| - |
852 | 753 | {% include elements/anchor.html name="Ionicons" %}
|
853 | 754 |
|
854 | 755 | <div class="content">
|
|
0 commit comments