Meta Box

[Icon field] Display icon (as subfield) by value only?

Support › General › [Icon field] Display icon (as subfield) by value only?Resolved

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 20, 2024 at 2:31 PM #44928
    Robert EhniRobert Ehni
    Participant

    I want to display an Metabox Icon in the frontend (regular fontawesome free icons). The icon field is a subfield of a cloneable group.
    I use custom PHP code and I am only able to retrieve the field value, e.g. fa-shield. So using the suggested rwmb_the_value( "<field-id>") is not working here (docs: https://docs.metabox.io/fields/icon/#examples).

    I tried using

    
<i class="fa <?php echo $iconValue ?>"></i>

    This does kind of work, but some icons seem to not work at all, e.g.:
    - shield: works
    - cube: works
    - clipboard: works
    - torii-gate: does not work
    - tower-cell: does not work

    Anyone an idea how to display an metabox icon field by value only? Or how can I display the icon properly here at all?

    Some more context: I use Oxygenbuilder and use the repeater element to loop over the groups.

    This is the full custom code I use within the Oxygenbuilder Codeblock element:

    
<?php
global $meta_box_current_group_fields;
$currentFields = $meta_box_current_group_fields;
$iconId = $currentFields["feature_icon"];
?>
<i class="fa <?php echo $iconId ?>"></i>

    I found the $meta_box_current_group_fields variable here: https://support.metabox.io/topic/image-advanced-field-in-groups-are-only-shown-in-a-thumbnail-size/

    March 20, 2024 at 10:50 PM #44943
    PeterPeter
    Moderator

    Hello Robert,

    If you want to show a subfield value in a cloneable group, please follow the documentation https://docs.metabox.io/extensions/meta-box-group/#getting-sub-field-values

    This is an example code:

    $group_values = rwmb_meta( 'group_id' ) ?: [];
foreach ( $group_values as $group_value ) {
    $value = $group_value[ $sub_field_key ] ?? '';
    echo $value; // Display sub-field value
}
    March 21, 2024 at 12:44 AM #44948
    Robert EhniRobert Ehni
    Participant

    Hi Peter,

    I am grateful for your response but I am afraid this not helpful at all.

    Have you tested my scenario or are you simply doing copy & paste from the docs?

    Using your code, I simply just get e.g. fa-solid fa-tower-cell as a string output _and not an icon_! And somehow e.g. using `<i class="fa fa-solid fa-tower-cell"></i>" is not rendered as fontawesome free icon while e.g. "fa-cube" is working?

    To specify my questions/problems:
    1) Why are not all icons included in the loaded css?
    2) How can I display an metabox icon using only the selected value (field id not available)?

    I would gladly appreciate a qualified answer from someone who actually did read my question and understood the problem. Because to me it seems you just skimmed over my post, looked up the documentation for Groups and simply copy & pasted something here.

    Thanks in advance.

    March 24, 2024 at 5:03 PM #44982
    PeterPeter
    Moderator

    Hello,

    Thanks for your feedback.

    There is an issue with the icon field and our development team is checking the issue. I will let you know when I have more information.

    April 8, 2024 at 7:59 PM #45164
    Robert EhniRobert Ehni
    Participant

    Hi Peter,

    do you know when the issue will be fixed? Any ETA?

    Best
    Robert

    April 8, 2024 at 10:47 PM #45172
    PeterPeter
    Moderator

    Hello Robert,

    Please update Meta Box to the new version 5.9.5 to display the SVG icon in the frontend when using the helper function rwmb_the_value().

    If you use the icon as the subfield in a group. You should enqueue the new version of Font Awesome (FA) style on your site to display the icon in the new FA version.

    For example the icon "tower-cell". It is available in the FA version 6.5 so you need to have the style of version 6 to display the icon. Simply, add this code to the file header.php in the theme folder before the code <?php wp_head(); ?>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.0/css/all.css">

    You can read more about supported icons in FA versions here https://fontawesome.com/versions

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.