🐞 fix: Adjust social icon styling

This commit is contained in:
Keith Solomon
2026-06-28 14:11:46 -05:00
parent a761c16802
commit 2399023286
7 changed files with 37 additions and 8 deletions
+3 -2
View File
@@ -103,8 +103,9 @@ $footerNav = ! empty( $locations['footer_navigation'] )
'views/partials/social-media', 'views/partials/social-media',
null, null,
array( array(
'circle' => true, 'circle' => false,
'classes' => 'social-icons p-0 text-14px bg-white! text-cwc-blue-02! hover:opacity-80!', 'classes' => 'social-icons p-0 hover:opacity-80!',
'size' => '24',
) )
); );
?> ?>
+4
View File
@@ -1 +1,5 @@
/* Miscellaneous extra styles */ /* Miscellaneous extra styles */
.social-icons svg {
@apply bg-transparent fill-white rounded-full block;
}
+11 -1
View File
@@ -34,7 +34,17 @@ $profile = getFieldValue( 'social_media.profile_name' ) ? getFieldValue( 'social
?> ?>
</nav> </nav>
<?php get_template_part( 'views/partials/social-media' ); ?> <?php
get_template_part(
'views/partials/social-media',
null,
array(
'circle' => false,
'classes' => 'social-icons p-0 hover:opacity-80!',
'size' => '16',
)
);
?>
<span class="font-semibold text-16px"><?php echo esc_html( $profile ); ?></span> <span class="font-semibold text-16px"><?php echo esc_html( $profile ); ?></span>
</div> </div>
+6 -1
View File
@@ -1 +1,6 @@
<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/social-facebook.svg' ) ); ?>" alt="" width="24" height="24" aria-hidden="true" /> <?php $size = $args['size'] ?? '24'; ?>
<svg width="<?php echo esc_attr( $size ); ?>" height="<?php echo esc_attr( $size ); ?>" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="facebook-icon-title">
<title id="facebook-icon-title">Facebook</title>
<path d="M24 12.0301C24 5.38947 18.624 0 12 0C5.376 0 0 5.38947 0 12.0301C0 17.8526 4.128 22.7008 9.6 23.8195V15.6391H7.2V12.0301H9.6V9.02256C9.6 6.70075 11.484 4.81203 13.8 4.81203H16.8V8.42105H14.4C13.74 8.42105 13.2 8.96241 13.2 9.62406V12.0301H16.8V15.6391H13.2V24C19.26 23.3985 24 18.2737 24 12.0301Z" />
</svg>
+5 -1
View File
@@ -1 +1,5 @@
<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/social-linkedin.svg' ) ); ?>" alt="" width="24" height="24" aria-hidden="true" /> <?php $size = $args['size'] ?? '24'; ?>
<svg width="<?php echo esc_attr( $size ); ?>" height="<?php echo esc_attr( $size ); ?>" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0C5.3725 0 0 5.3725 0 12C0 18.6275 5.3725 24 12 24C18.6275 24 24 18.6275 24 12C24 5.3725 18.6275 0 12 0ZM9.0625 16.9738H6.6325V9.15375H9.0625V16.9738ZM7.8325 8.19375C7.065 8.19375 6.56875 7.65 6.56875 6.9775C6.56875 6.29125 7.08 5.76375 7.86375 5.76375C8.6475 5.76375 9.1275 6.29125 9.1425 6.9775C9.1425 7.65 8.6475 8.19375 7.8325 8.19375ZM17.9375 16.9738H15.5075V12.64C15.5075 11.6313 15.155 10.9462 14.2763 10.9462C13.605 10.9462 13.2063 11.41 13.03 11.8563C12.965 12.015 12.9488 12.24 12.9488 12.4638V16.9725H10.5175V11.6475C10.5175 10.6713 10.4862 9.855 10.4537 9.1525H12.565L12.6763 10.2388H12.725C13.045 9.72875 13.8288 8.97625 15.14 8.97625C16.7388 8.97625 17.9375 10.0475 17.9375 12.35V16.9738Z" />
</svg>
+5 -1
View File
@@ -1 +1,5 @@
<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/social-youtube.svg' ) ); ?>" alt="" width="24" height="24" aria-hidden="true" /> <?php $size = $args['size'] ?? '24'; ?>
<svg width="<?php echo esc_attr( $size ); ?>" height="<?php echo esc_attr( $size ); ?>" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0037 11.7913L11.1963 10.4813C10.9513 10.3675 10.75 10.495 10.75 10.7662V13.2338C10.75 13.505 10.9513 13.6325 11.1963 13.5188L14.0025 12.2087C14.2488 12.0938 14.2487 11.9063 14.0037 11.7913ZM12 0C5.3725 0 0 5.3725 0 12C0 18.6275 5.3725 24 12 24C18.6275 24 24 18.6275 24 12C24 5.3725 18.6275 0 12 0ZM12 16.875C5.8575 16.875 5.75 16.3213 5.75 12C5.75 7.67875 5.8575 7.125 12 7.125C18.1425 7.125 18.25 7.67875 18.25 12C18.25 16.3213 18.1425 16.875 12 16.875Z" />
</svg>
+3 -2
View File
@@ -7,8 +7,9 @@
namespace CWC; namespace CWC;
$classes = $args['classes'] ?? '';
$circle = $args['circle'] ?? ''; $circle = $args['circle'] ?? '';
$classes = $args['classes'] ?? '';
$size = $args['size'] ?? '24';
// Define social media sites and their URLs // Define social media sites and their URLs
$sites = array( $sites = array(
@@ -30,7 +31,7 @@ foreach ( $sites as $name => $url ) {
if ( $url ) { if ( $url ) {
?> ?>
<a href="<?php echo esc_url( $url ); ?>" class="<?php echo esc_attr( $classes ); ?> p-0 leading-none"> <a href="<?php echo esc_url( $url ); ?>" class="<?php echo esc_attr( $classes ); ?> p-0 leading-none">
<?php get_template_part( 'views/icons/' . $name ); ?> <?php get_template_part( 'views/icons/' . $name, null, array( 'size' => $size ) ); ?>
<span class="sr-only bg-white text-black">Visit our <?php echo esc_html( $name ); ?> page</span> <span class="sr-only bg-white text-black">Visit our <?php echo esc_html( $name ); ?> page</span>
</a> </a>
<?php <?php