- This topic has 14 replies, 2 voices, and was last updated 2 years, 8 months ago by
.
-
Posts
-
Hi. Just learned about the “Assets library”. I have an angle down arrow svg icon similar to the GeneratePress back to top icon. I’ve loaded it via the GP documentation. I’m assuming it’s assessable in the GenerateBlocks UI – buttons, choose an icon font, etc.
https://docs.generateblocks.com/article/asset-library/
I have page hero headers I’ve designed using elements. I’ve coded the text layout with the “angle-down-solid icon within my circle, alpha-ball-medium css graphic” in the elements – header code (please see below as well as Dropbox screenshots at bottom of post.)
Link:
https://j66.coNote: please look for angle-down-solid icon in alpha-ball-medium circle, center of page in the hero image section. This is an elements – header block. I have one set for every page using this ui. Click angle-down.. scrolls to id
____________
<h1>j66 + Co</h1> <br> <h3>A Digital Product Development</h3> <h3>Strategy Consultancy</h3> <br> <div style="padding-right: 42px; padding-top: 0px;"> <div class="scale hover ps2id alpha-ball-medium "> <a style="font-size: 20px; padding-top: 12px; color: #fdf9f9; text-decoration: none; background-color: transparent;" class="las la-angle-down smooth-scroll" href="#top-section"></a> </div> </div>____________
The class notes the “line-awesome css class” in my css which pulls in the correct icon (down angle arrow).
Objective:
Ditch loading the whole line-awesome-min.css font library (I’m just using this one icon. Eliminate render blocking; better performance)
Load my angle-down svg icon in the elements header code rather than the usual font.Question.
Not sure how to code this in the elements – header blocks.This is the path to my icon.
https://j66.co/wp-content/uploads/2023/01/angle-down-solid.svg<svg viewBox=”0 0 32 32″ xmlns=”http://www.w3.org/2000/svg” preserveAspectRatio=”none”><path d=”M 4.21875 10.78125 L 2.78125 12.21875 L 15.28125 24.71875 L 16 25.40625 L 16.71875 24.71875 L 29.21875 12.21875 L 27.78125 10.78125 L 16 22.5625 Z”></path></svg>
____________
Dropbox screenshots
https://www.dropbox.com/s/mlkj77czhux7ock/IMG_8905.PNG?dl=0
https://www.dropbox.com/s/cu06ds470qgq0w4/IMG_8906.PNG?dl=0
Sincere thanks for your suggestions in advance. Hope all is well.
Customer Support
Hi Brad,
What I would highly recommend is to create this Header through a Block Element – Page Hero. Reference: https://docs.generatepress.com/article/block-element-page-hero/
With this, you shouldn’t need custom CSS, and in the upcoming update, setting such a layout would be much easier.
For the icon, you can add it as an icon through a GB Button Block. Reference: https://docs.generateblocks.com/article/buttons-overview/#icon
Make sure to set the button to “Remove Text” and make the background transparent as well with
0paddings.In the future maybe but I have 14 sites built previously going back 3 years. I can’t change them all now. Is there a way to achieve my objective currently?
I see. So, to clarify, is the main goal right now to add the SVG button through the hook element you have and create CSS to position it?
If so, can you provide a different site that doesn’t have the dropdown icon yet?
The main goal would be to replace the line-awesome class (which pulls in the angle-down-solid font) with the angle-down-solid.svg that is now loaded locally.
.. class="las la-angle-down smooth-scroll" href="#top-section"></a>class=“las la-angle-down
Needs to be replaced and pull in the svg fontThis is the path to my icon.
https://j66.co/wp-content/uploads/2023/01/angle-down-solid.svg<h1>j66 + Co</h1> <br> <h3>A Digital Product Development</h3> <h3>Strategy Consultancy</h3> <br> <div style="padding-right: 42px; padding-top: 0px;"> <div class="scale hover ps2id alpha-ball-medium "> <a style="font-size: 20px; padding-top: 12px; color: #fdf9f9; text-decoration: none; background-color: transparent;" class="las la-angle-down smooth-scroll" href="#top-section"></a> </div> </div>I have been enqueue ing the css. Id like to avoid loading it all together
function j66gpdonebox_enqueue_style() { if ( is_child_theme() ) { // load parent stylesheet first if this is a child theme wp_enqueue_style( 'parent-stylesheet', trailingslashit( get_template_directory_uri() ) . 'style.css', false ); } // load active theme stylesheet in both cases wp_enqueue_style( 'child-theme-stylesheet', get_stylesheet_uri() ); // https://icons8.com/line-awesome/howto // <i class="las la-angle-down"></i> // wp_enqueue_style( 'line-awesome', '//maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css' ); wp_enqueue_style( 'line-awesome', get_stylesheet_directory_uri() . '/css/line-awesome.min.css' ); } //function j66gpdonebox_enqueue_script() { /* true loads js in footer */ // wp_enqueue_script( 'j66-custom-js', get_stylesheet_directory_uri() . '/scripts/j66-custom.js', array( 'jquery' ), '1', false ); add_action( 'wp_enqueue_scripts', 'j66gpdonebox_enqueue_style' ); //add_action( 'wp_enqueue_scripts', 'j66gpdonebox_enqueue_script' );I see. How about using this instead?:
<h1>j66 + Co</h1> <br> <h3>A Digital Product Development</h3> <h3>Strategy Consultancy</h3> <br> <div style="padding-right: 42px; padding-top: 0px;"> <div class="scale hover ps2id alpha-ball-medium "> <a href="#top-section"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 4.21875 10.78125 L 2.78125 12.21875 L 15.28125 24.71875 L 16 25.40625 L 16.71875 24.71875 L 29.21875 12.21875 L 27.78125 10.78125 L 16 22.5625 Z"/></svg> </a> </div> </div>I just simply added the SVG code directly inside the
<a>tag. Does that work?Sorry. Just seeing your reply. On mobile. Will be home in 10 min and try code. Sincere thanks. Will try code and reply back.
Question… does that load it locally? It looks like it’s an addition http request on every page load. No?
You can add SVG directly to HTML. With this, there’s no extra “request”.
Alright, let us know how it goes.
Ok thanks for clarity regarding http request. This is the code I have currently.
<div style="padding-right: 42px; padding-top: 0px;"> <div class="scale hover ps2id alpha-ball-medium "> <a href="#top-section" class="smooth-scroll"> <svg class="j66co-angle-down-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 4.21875 10.78125 L 2.78125 12.21875 L 15.28125 24.71875 L 16 25.40625 L 16.71875 24.71875 L 29.21875 12.21875 L 27.78125 10.78125 L 16 22.5625 Z"/></svg> </a> </div> </div>I added this css.
.j66co-angle-down-svg path {
fill: white;
}Any idea how to make it a smaller size? It’s not a normal font as placed in code.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
You can try working with the width value. Example:
.scale.hover.ps2id.alpha-ball-medium { width: 25px }The alpha ball is fine. It took me forever to line that up with border radius and get centered without flexbox.
Would width work on the css of the svg? I’ll try it now..it didn’t work..
.j66co-angle-down-svg path { fill: white; width: 25px; }Ok. I got this to look good. It’s not perfectly centered. Not sure how to do that but it’ll work. Sincere thanks for your assistance.
.j66co-angle-down-svg { padding-top: 10px; width: 25px; }On the SVG itself, it would work.
Example:
svg.j66co-angle-down-svg { width: 25px; }You’re welcome, Brad!
- You must be logged in to reply to this topic.
