cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
seadude
Memorable Member
Memorable Member

Icon Fill?

Hello everyone!

 

Is there a way to fill ONLY the icon and not the background of the icon? I just want the CIRCLE fill, not the big SQUARE fill behind the icon.

 

Example:

  • I want the circle filled

2018-10-06-10-40-01.png

  • Not the entire background filled

2018-10-06-10-39-28.png

Any ideas?

1 ACCEPTED SOLUTION

Accepted Solutions
wyotim
Resident Rockstar
Resident Rockstar

Hopefully, these two pictures show all that I was trying to explain. Let me know if more detail is needed. This is a really fun technique as it allows for some cool, non-standard graphical options. One thing I am enjoying right now is making buttons with graphics and text that have some measure of on-hover and on-click color changes. Makes the app just a bit heavier, but worth it to make a better look and experience for the user (in my mind anyway).

 

Next Arrow icon and Circle shapeNext Arrow icon and Circle shapeCircle moved back, X, Y, width, & height set to Next Arrow (named icon1)Circle moved back, X, Y, width, & height set to Next Arrow (named icon1)

View solution in original post

5 REPLIES 5
wyotim
Resident Rockstar
Resident Rockstar

I layer icons to get this effect, so in your case I would put a filled circle behind the icon. You can group them if needed, which helps, but I also reference the X, Y, width, and height properties from one to the others to keep sizing and moving issues at bay.

*edit for morning typing difficulties*
seadude
Memorable Member
Memorable Member

Aha! So you'd: 

 

  • Create a filled circle in Gimp/Illustrator/etc.
  • Then go File/Media/Browse/Add
  • Then put an Image control behind the Icon with said filled circle

 

Lets see. Then the icon would be set to transparent ( RGBA(0,0,0,0) )...

 

You'd have to get even trickier to have a HoverFill in there huh?

 

Basically create another filled circle with 20% fade, then OnHover of the first filled circle, set its Visible property to false so the 20% circle shows...

 

Yowsa! @powerapps, how about helping us out a bit by filling the ICON instead of the whole thumbnail?

 

Maybe i'm making this too complicate?

wyotim
Resident Rockstar
Resident Rockstar

Not quite that elaborate, but interesting idea! There is a circle shape in the icons group down near the bottom. That is much easier and gives the awesome ability to make the color dynamic if need be. I will hop in my computer and post some screen caps.
wyotim
Resident Rockstar
Resident Rockstar

Hopefully, these two pictures show all that I was trying to explain. Let me know if more detail is needed. This is a really fun technique as it allows for some cool, non-standard graphical options. One thing I am enjoying right now is making buttons with graphics and text that have some measure of on-hover and on-click color changes. Makes the app just a bit heavier, but worth it to make a better look and experience for the user (in my mind anyway).

 

Next Arrow icon and Circle shapeNext Arrow icon and Circle shapeCircle moved back, X, Y, width, & height set to Next Arrow (named icon1)Circle moved back, X, Y, width, & height set to Next Arrow (named icon1)

View solution in original post

seadude
Memorable Member
Memorable Member

Aha! That is WAY easier. As always, @wyotim, thanks so much for sharing your skills!

Take care

Helpful resources

Announcements
2022 Release Wave 1 760x460.png

2022 Release Wave 1 Plan

Power Platform release plan for the 2022 release wave 1 describes all new features releasing from April 2022 through September 2022.

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Top Solution Authors
Top Kudoed Authors
Users online (2,810)