css 用FontAwesome图标替换默认导航箭头。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 用FontAwesome图标替换默认导航箭头。相关的知识,希望对你有一定的参考价值。

/*** 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 FontAwesome nav arrows */
.envirabox-nav::before { 
  display: block;
  font-family: 'FontAwesome';
  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 FontAwesome icon unicode you want to use ***/
  content: '\f104';
  
  left: 0 !important;
  -webkit-transform: translate(50%, -50%);
  -moz-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
}

.envirabox-next::before {
  /*** Replace with the FontAwesome icon unicode you want to use ***/
  content: '\f105';
  
  right: 0 !important;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

以上是关于css 用FontAwesome图标替换默认导航箭头。的主要内容,如果未能解决你的问题,请参考以下文章

css 用Dashicons图标替换默认导航箭头。

在 CSS 中使用 Font Awesome 图标

使用icon替换你的网页图标(转)

LaTeX的fontawesome图标

fontawesome 图标怎么安装

CSS 导航:当鼠标悬停在图标上时,图标应替换为文本链接