Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 20, 2023 at 6:12 pm #1401810
    sarthakchoudhary

    Hey I want to use Gif’s as icons on my flip box. I don’t want to upload them from flaticon but want to use which I have on my desktop . Can I use them ?

    March 20, 2023 at 9:30 pm #1401835
    Guenni007

    You can upload gifs to your media library. However, if you insert them into your elements, and you want to keep any animations you may have, you must use the original gif (not a scaled down version).
    The recalculated files will lose the animation.
    Google times after using it as a featured image (animated gif) no recalculation was done and the maximum width had to be considered.

    March 21, 2023 at 5:58 am #1401845
    Nikko

    Hi sarthakchoudhary,

    It’s possible using custom CSS code, use this code and just replace the background image url:

    .page-id-1052 .avia-icon-grid-container .av-icon-cell-item .icongrid-char {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    height: 64px;
    width: 64px;
}

.page-id-1052 .avia-icon-grid-container .av-icon-cell-item .icongrid-char:before {
    display: none;
}

/* Row:1 Col:1 */
.page-id-1052 .avia-icon-grid-container .av-row-nr-1.av-cell-1 .icongrid-char {
    background-image: url(https://website.com/wp-content/uploads/2023/3/1.gif);
}

/* Row:1 Col:2 */
.page-id-1052 .avia-icon-grid-container .av-row-nr-1.av-cell-2 .icongrid-char {
    background-image: url(https://website.com/wp-content/uploads/2023/3/2.gif);
}

/* Row:1 Col:3 */
.page-id-1052 .avia-icon-grid-container .av-row-nr-1.av-cell-3 .icongrid-char {
    background-image: url(https://website.com/wp-content/uploads/2023/3/3.gif);
}

/* Row:2 Col:1 */
.page-id-1052 .avia-icon-grid-container .av-row-nr-2.av-cell-1 .icongrid-char {
    background-image: url(https://website.com/wp-content/uploads/2023/3/4.gif);
}

/* Row:2 Col:2 */
.page-id-1052 .avia-icon-grid-container .av-row-nr-2.av-cell-2 .icongrid-char {
    background-image: url(https://website.com/wp-content/uploads/2023/3/5.gif);
}

/* Row:2 Col:3 */
.page-id-1052 .avia-icon-grid-container .av-row-nr-3.av-cell-3 .icongrid-char {
    background-image: url(https://website.com/wp-content/uploads/2023/3/6.gif);
}

    Hope it helps.

    Best regards,
    Nikko

    March 22, 2023 at 4:11 pm #1402020
    sarthakchoudhary

    Thankyou it’s working. What should I do if i want to increase size of the icons ?
    Also can I use the same code for applying gifs on other pages which have the boxes by just replacing the page id ?

    March 23, 2023 at 6:37 am #1402083
    Nikko

    Hi sarthakchoudhary,

    Thankyou it’s working. What should I do if i want to increase size of the icons ?
    You’re welcome :) just change the height and width of this part of the code I gave:

    .page-id-1052 .avia-icon-grid-container .av-icon-cell-item .icongrid-char {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    height: 64px;
    width: 64px;
}

    Also can I use the same code for applying gifs on other pages which have the boxes by just replacing the page id ?
    Yes, just copy and paste the same code and just replace the page id number.

    Best regards,
    Nikko

    March 23, 2023 at 8:18 pm #1402192
    sarthakchoudhary

    Okay thank you

    March 24, 2023 at 5:33 am #1402237
    Nikko

    Hi sarthakchoudhary,

    You’re welcome :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Use Gif’s as Icons’ is closed to new replies.