Icon as button that is aligned right

Using Streamlit
,
1

I’m not familiar with css, so pardon me if this question is trivial.

I’m trying to make a button with just an icon that is aligned right.

I understand that the post by @blackary in Icon as button - #6 by blackary allows the use of icon as a button.

I’m also found a solution below where I can align the button to the right.

    with stylable_container(
        key="test_icon_button",
        css_styles=r"""
            button {
                float: right;
            }
        """
    ):
        test_button = st.button('test', key='test',
            # help='test'  # adding this would ignore the float right
        )

Problem 1: When I add a help argument in the st.button, the right alignment became undone.

Problem 2: I’m also not able to combine both using just icon as button and right alignment together.

Attempts made:

  1. Doing the following does right align the icon button, but then all other buttons would also now also be aligned right.
        css_styles=r"""
            button div:before {
                font-family: 'Font Awesome 5 Free';
                content: '\f7d9';
                vertical-align: middle;
                font-weight: 900;
            }
            button {
                float: right;
            }
        """
  1. While doing the following would also right align the icon button, but then all other buttons would also now also have the icon pre-appended.
        css_styles=r"""
            button {
                float: right;
            }
            button div:before {
                font-family: 'Font Awesome 5 Free';
                content: '\f7d9';
                vertical-align: middle;
                font-weight: 900;
            }
        """

How can I use just an icon button that is aligned right with the help argument in st.button?

2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.