css 用Dashicons图标替换默认导航箭头。
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 用Dashicons图标替换默认导航箭头。相关的知识,希望对你有一定的参考价值。
/*** Make nav arrows always visible (optional) ***/
.envirabox-nav { visibility: visible !important; }
/* Remove default navigation arrow background images */
.envirabox-nav span { display: none !important; }
/* Make the clickable nav area larger */
.envirabox-nav { width: 30% !important; height: 100% !important; }
/* Add custom Dashicons nav arrows */
.envirabox-nav::before {
display: block;
font-family: 'Dashicons';
position: absolute;
top: 50%;
/*** Color of the icons, modify as desired ***/
color: #fff !important;
/*** Font size of the icons, modify as desired ***/
font-size: 50px;
}
/* Prev nav arrow */
.envirabox-prev::before {
/*** Replace with the Dashicons icon unicode you want to use ***/
content: '\f341';
left: 0 !important;
-webkit-transform: translate(50%, -50%);
-moz-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
.envirabox-next::before {
/*** Replace with the Dashicons icon unicode you want to use ***/
content: '\f345';
right: 0 !important;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
以上是关于css 用Dashicons图标替换默认导航箭头。的主要内容,如果未能解决你的问题,请参考以下文章
css 将Envira Lightbox关闭和导航箭头图标重新定位到浏览器窗口的外部ege。
markdown Wordpress Dashicons /自定义帖子类型图标/ CPT图标
CSS 导航:当鼠标悬停在图标上时,图标应替换为文本链接
markdown 资源:Wordpress Dashicons /自定义帖子类型图标/ CPT图标
后退和前进导航箭头图标不见了
用图形替换文本链接(导航)