This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Circle Icon Bigger or Features Icon With Image

Open 1 reply premiumthemetheme-vantage
Jose AMezcua
10 years ago · Last reply by Andrew Misplon 10 years ago

Hello Site Origin Theme,

I want a circle icon that has an image instead of an icon, I know this can be done using Site Origin Features Widget or with the Circle Icon. I find myself with the following problem:

Circle widget: Large is just too small, I tried adding some CSS to make it bigger but the it overlapped the container.

.widget_circleicon-widget .circle-icon-box.circle-icon-size-large .circle-icon {
  width: 250px;
  height: 250px;
}

Site Origin Features: I uploaded the image (size 300x300px) and selected “circle” icons. The icon does not have the circle shape and It seems to be loading the image thumbnail or something because the image is 150×150 px causing it to look low-res.

Here is a page I did just to show you guys the issue: http://electricaixtapa.com/icon-trouble-thanks/

Thanks,
hope you can help!
J.

URL: http://electricaixtapa.com

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

1
  1. Andrew Misplon Staff 10 years, 11 months ago

    Hi Jose

    I based the following off the Circle Icon widget in small size but given this Custom CSS it shouldn’t matter what you set that to. Give the below a try:

    /* Circle Icon Widget */
.widget_circleicon-widget .circle-icon-box .circle-icon {
  width: 250px; /* New size */
  height: 250px; /* New size */
  -webkit-border-radius: 500px; /* New size x 2 */
  -moz-border-radius: 500px; /* New size x 2 */
  border-radius: 500px; /* New size x 2 */
}
.widget_circleicon-widget .circle-icon-box.circle-icon-position-top .circle-icon {
  margin-left: -125px; /* New size / 2 */
}
.widget_circleicon-widget .circle-icon-box.circle-icon-position-top {
  padding-top: 260px; /* New size +10px */
}

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread