{"id":243,"date":"2020-04-22T06:24:32","date_gmt":"2020-04-22T06:24:32","guid":{"rendered":"https:\/\/localhost\/bricksacademy\/?post_type=bricks_article&#038;p=243"},"modified":"2022-08-22T11:16:28","modified_gmt":"2022-08-22T11:16:28","slug":"icon-control","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/icon-control\/","title":{"rendered":"Icon Control"},"content":{"rendered":"\n<p>The icon control lets you select and output icons from the following icon font libraries:<\/p>\n\n\n\n<ul><li><a rel=\"noopener noreferrer\" href=\"https:\/\/fontawesome.com\/icons?d=gallery&amp;m=free\" target=\"_blank\">Fontawesome 6<\/a><\/li><li><a rel=\"noopener noreferrer\" href=\"https:\/\/ionicons.com\/cheatsheet.html\" target=\"_blank\">Ionicons 4<\/a><\/li><li><a rel=\"noopener noreferrer\" href=\"https:\/\/themify.me\/themify-icons\" target=\"_blank\">Themify<\/a><\/li><\/ul>\n\n\n\n<p>The user can also select individually uploaded SVG files if you&#8217;ve enabled &#8220;<strong>SVG Uploads<\/strong>&#8221; under &#8220;Bricks &gt; Settings&#8221; in your WordPress dashboard.<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint\"><code>class Prefix_Element_Icon extends \\Bricks\\Element {\n  \/\/ Set builder controls\n  public function set_controls() {\n    $this-&gt;controls&#91;'exampleIcon'] = &#91;\n      'tab' =&gt; 'content',\n      'label' =&gt; esc_html__( 'Icon', 'bricks' ),\n      'type' =&gt; 'icon',\n      'default' =&gt; &#91;\n        'library' =&gt; 'themify', \/\/ fontawesome\/ionicons\/themify\n        'icon' =&gt; 'ti-star',    \/\/ Example: Themify icon class\n      ],\n      'css' =&gt; &#91;\n        &#91;\n          'selector' =&gt; '.icon-svg', \/\/ Use to target SVG file\n        ],\n      ],\n    ];\n  }\n\n  \/\/ Render element HTML\n  public function render() {\n    \/\/ Set icon 'class' attribute\n    if ( isset( $this-&gt;settings&#91;'exampleIcon'] ) ) {\n      Helpers::render_control_icon( $settings&#91;'exampleIcon'], &#91;'test-class', 'test-class-2'] );\n    }\n  }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The icon control lets you select and output icons from the following icon font libraries: Fontawesome 6 Ionicons 4 Themify The user can also select individually uploaded SVG files if you&#8217;ve enabled &#8220;SVG Uploads&#8221; under &#8220;Bricks &gt; Settings&#8221; in your WordPress dashboard.<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":159,"template":"","format":"standard","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/243"}],"collection":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article"}],"about":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/types\/bricks_article"}],"author":[{"embeddable":true,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/243\/revisions"}],"predecessor-version":[{"id":3138,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/243\/revisions\/3138"}],"wp:attachment":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/media?parent=243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}