Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #1148558

    Hi,
    I am trying to get an icon next to the title on a portfolio grid. Any ideas on how to do that? Thanks for your help.
    Rob

    #1148640

    Hey Volgspot,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    #1148918
    This reply has been marked as private.
    #1149271

    Hi Volgspot,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    #av-sc-portfolio-1 .entry-content-header a:before {
      content: '\ue812';
      font-family: 'entypo-fontello';
      font-weight: normal;
      speak: none;
    }
    

    What icon is that? It does not render.

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1149285

    Thanks a lot!!! The right code is: \E812

    Regards rob

    #1149337

    Hi Volgspot,

    Please try it like this:

    
    #av-sc-portfolio-1 .entry-content-header a:before {
      content: '\E812';
      font-family: 'entypo-fontello';
      font-weight: normal;
      speak: none;
      margin-right: 5px;
    }
    

    Best regards,
    Victoria

    #1150440

    That does it. Thanks! Rob

    #1150615

    Hi Volgspot,

    Glad we got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1153959

    Hi Victoria, You helped me fix the above issue, but I have one more problem with it. The text of the title is not aligned the right way

    It’s like this:
    ICON MASTER
    DATA MANAGEMENT

    It should be like this:
    ICON MASTER
    DATA MANAGEMENT

    Is there a fix for that? Thx Rob

    #1153961

    Im sorry like this:

    ICON MASTER
    ——–DATA MANAGEMENT

    #1155245

    Hi,
    Sorry for the late reply, I’m not sure I understand correctly, is this what you are looking for?
    2019-11-09-141111

    Best regards,
    Mike

    #1155601

    Hi Mike, No problem, thanks for your reply. Yes that’s exactly what I mean. Is that possible?

    Thanks Rob

    #1155620

    Hi Volgspot,

    Please try using code like this:

    
      #av-sc-portfolio-1 .entry-content-header a:before {
        content: '\E812';
        font-family: 'entypo-fontello';
        font-weight: normal;
        speak: none;
        margin-right: 5px;
        float: left;
        min-height: 40px;
      }
        #av-sc-portfolio-1 .entry-content-header a {
          word-wrap:break-word;
        }
    

    Best regards,
    Victoria

    #1155627

    Hi Victoria,

    Yes that worked perfect. THX again! Regards Rob

    #1155729

    Hi Volgspot,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1199085

    Hi Victoria,

    I am trying to achieve a similar outcome but with using “Masonry” instead of the “Portfolio Grid”. (Individual icons centred above the Portfolio Title)
    See sample below.

    Any ideas on how to do this? Many Thanks.

    Kind regards,
    Marc

    Sample

    • This reply was modified 4 years, 7 months ago by marcgys.
    #1200507

    Hi,

    @marcgys
    sorry for the late reply, please link to your page so we can see what you have so far.

    Best regards,
    Mike

    #1201930

    Hi @mike,

    Here is the home page i’ve started using the “Masonry” feature where I would like to have Individual icons centred above the Portfolio Titles. It will be an Online Guest Handbook for our vacation rental. I guess most guests will use a mobile device to view it.

    Many thanks,
    Marc

    #1202989

    Hi,
    Sorry for the late reply, the following css will place an icon above the titles, to place a different icon above each title add the masonry ID to the code with the icon and copy for each icon. Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content .avia-arrow {
    	  display: block;
    	  top: 40%;
    	  left: 47% !important; 
    	  transform: rotate(0deg) !important; 
    }
    .av-masonry-entry .avia-arrow:before {
    	content: "\e821";
    	font-family: entypo-fontello;
    	color: #fff;
    	font-size: 40px;
    }
    
    @media only screen and (max-width: 767px) { 
    	#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content .avia-arrow {
    	  display: block;
    	  top: 20%;
    	  left: 47% !important; 
    	  transform: rotate(0deg) !important; 
    }
    .av-masonry-entry .avia-arrow:before {
    	content: "\e821";
    	font-family: entypo-fontello;
    	color: #fff;
    	font-size: 20px;
    }
    }

    Best regards,
    Mike

Viewing 19 posts - 1 through 19 (of 19 total)
  • You must be logged in to reply to this topic.