Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • January 17, 2017 at 12:59 am #734413
    LifeIsNow001

    Im trying to change the icon boxes to text, I enabled classes on all elements, gave the Icon box the class of iconBox1 and added this css code into
    quick css. Can’t get anything to show. Any ideas? Website login info below

    .iconBox1 [data-av_icon]:before {
   content: "car 1225 "!important;
}

    referencing this post

    Replace Icon in Icon Box with Own Images?

    January 17, 2017 at 7:06 am #734506
    Vinay

    Hey LifeIsNow001,

    It’s not clear what exactly you are trying to do? I am assuming you like to add your own icons to the icon box is that correct?

    In that case please upload your font icons to the theme from Enfold > Import Export tab and insert it via theme options.

    Please check this link for more info http://kriesi.at/documentation/enfold/adding-your-own-icon-fonts/

    Best regards,
    Vinay

    January 17, 2017 at 7:09 am #734510
    LifeIsNow001

    I’m trying to change the icon to text. I want the text on that icon box to say “car 1225”

    January 17, 2017 at 7:58 am #734532
    Basilis

    Hi!

    .iconBox1 [data-av_icon]::before {
   content: 'car 1225' !important;
}

    Let me know if that will work for you.

    Cheers!
    Basilis

    January 18, 2017 at 2:58 am #735081
    LifeIsNow001

    That doesn’t work, feel free to try the code on the site to test it if you want.

    Cheers

    January 20, 2017 at 1:15 pm #736417
    Andy

    Hi,

    instead put your text as Icon’s Title and then use this code inside Quick CSS field:

    .iconbox_content_title {
top: -60px;
}

    Best regards,
    Andy

    January 24, 2017 at 1:38 am #737498
    LifeIsNow001

    I was able to use your code modified to get the look I wanted. Thank you. I still gave the icon box a class of .iconBox1 in order to control which boxes changed, i didn’t want them all changed.

    .iconBox1 .iconbox_content_title {
top: -66px; 
left:4px;
font-size:12px!important;
line-height:1.25em!important;
text-align:center!important;
}

    Now i have another page listed in the private below.
    You can see these ones have the round icon on the left, when I try to move the TEXT over left and down, it disappears. You can see it on the first section called CAR 1225. Any ideas what I might do here?

    Thank you.

    January 27, 2017 at 6:43 am #739221
    Vinay

    Hey!

    It appears the approach you have for this is not viable. Please remove the custom code you have and share a mockup of the end result you want to achieve so we can help you better :)

    Best regards,
    Vinay

    January 28, 2017 at 11:00 pm #739821
    LifeIsNow001

    Hi Guys,

    I have removed the formatting i added, I wasn’t the creator of the site so I can’t vouch if anything else was done.

    Here is the current – scroll down just a bit: http://fvhrs.org/experience-it/

    Here is what we want to achieve: http://prnt.sc/e1kr8w

    Thanks

    February 2, 2017 at 8:13 am #741614
    Ismael

    Hi!

    I checked the screenshot but it’s missing. Please upload it again. Which text are you trying to adjust? The css code above will not do anything because the “.iconbox_content_title” is empty.

    Regards,
    Ismael

    February 2, 2017 at 9:02 am #741639
    LifeIsNow001

    I have removed all classes and CSS as requested above. I just clicked the screenshot and it was there, maybe try view it in a different browser? I use chrome.
    I am trying to make text appear inside the red circle (icon box)

    Thanks

    February 7, 2017 at 10:54 am #743807
    Ismael

    Hi,

    We eapplied unique css classes to the first iconbox and text block in the set. We used “custom_iconbox” and the “custom_textblock” respectively. And then added the following script in the functions.php file.

    // custom script
function ava_custom_script_mod() {
?>
	<script type="text/javascript">
	(function($) {
		function a() {
			$('.custom_iconbox').each(function() {
				var title = $(this).parent().next('.flex_column').find('.custom_textblock').find('strong').text();

				$(this).find('.iconbox_icon').text(title);
			});
		}

		a();

	})(jQuery);
	</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod');

    You can see the result in the frontend and all you have to do now is to apply the same custom css classes to the rest of the elements.

    Best regards,
    Ismael

    February 7, 2017 at 10:35 pm #744121
    LifeIsNow001

    Wow that was pretty extensive, thank you very much.

    I tried to edit the text to make it white, and move it down a bit, i edited the class iconbox_icon, but it’s also changing other icon boxes on the page.
    I tried to edit these classes as well, .custom_iconbox, custom_textblock and nothing happened.

    Any idea how i can change the things just for these icon boxes and not the rest?

    February 9, 2017 at 3:40 am #744579
    Ismael

    Hi!

    Please use something like the following.

    #top .custom_iconbox .iconbox_icon {
    color: #ffffff;
    font-size: 12px;
}

    Best regards,
    Ismael

    February 11, 2017 at 2:57 am #745671
    LifeIsNow001

    That was perfect to get me on the way to what I needed. All done now thank you! You guys really go above and beyond sometimes. We have lots of our clients on Enfold, great theme, awesome support!

    February 11, 2017 at 8:08 am #745711
    Ismael

    Hey!

    Great! Glad that we could help. And thank you for using the theme! Have a nice day!

    Cheers!
    Ismael

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Change icon box to text’ is closed to new replies.