在屏幕调整大小时为引导元素分配新类不起作用

Im trying to change a FONT-AWESOME glyphicon class from fa-3x size to fa-2x size when the window reaches 991px or smaller. It also needs to change when the window loads at 991px or smaller... here's two options I tried:

我试图在窗口达到991px或更小时将FONT-AWESOME glyphicon类从fa-3x大小更改为fa-2x大小。它还需要在窗口加载到991px或更小时更改...这是我尝试的两个选项:

JAVASCRIPT METHOD 1:

/*CHANGE CLASS OF #glyph2 AT 991 OR LESS VW DURING DOCUMENT READY*/
    if( $(window).innerWidth() <= 991)
      {document.getElementById('#glyph2').className = "fa fa-caret-right fa-2x";} 
    else if( $(window).innerWidth() > 991)
      {document.getElementById('#glyph2').className = "fa fa-caret-right fa-3x";} 

/*CHANGE CLASS OF #glyph2 AT 991 OR LESS VW DURING RESIZE*/
  $(window).resize(function () {
    if( $(window).innerWidth() <= 991)    
      {document.getElementById('#glyph2').className = "fa fa-caret-right fa-2x";} 
    else if( $(window).innerWidth() > 991)  
      {document.getElementById('#glyph2').className = "fa fa-caret-right fa-3x";};
}); 

AND

JAVASCRIPT METHOD 2:

(function($) {
var $window = $(window),
    $glyph2 = $('#glyph2');

function resize() {
    if ($window.width() <= 991) {
        return $glyph2.addClass('fa fa-caret-right fa-2x');
    }
    $glyph2.addClass('fa fa-caret-right fa-3x');
}

$window
    .resize(resize)
    .trigger('resize');
})(jQuery);

Neither of these two options works.. Any ideas or fixes would be greatly appreciated thanks!

这两个选项都不起作用..任何想法或修复将不胜感激,谢谢!

3 个解决方案

#1

EASIER CSS AND MEDIA QUERIES METHOD:

Probably the best and easiest method - using only Media Queries and CSS:

可能是最好和最简单的方法 - 仅使用媒体查询和CSS:

HTML CODE:

<button id="btn6" type="button" class="btn btn-default"><p id="btn6Text">READ MORE ABOUT US<i id="glyph2" class="fa fa-caret-right fa-3x"></i></p></button>

CSS CODE:

/* When SCREEN VW <= 991px ----------- */
@media only screen
and (max-width : 991px) {

/* Styles */
#glyph2 {
    font-size: 2em !important;
}

}

JSFIDDLE DEMO HERE

JSFIDDLE DEMO在这里

#2

(Found a fix! Instead of changing the class, I simply rewrite the html code each time the window ends up smaller than 991px:

(找到一个修复程序!我只是在每次窗口最终小于991px时重写html代码而不是更改类:

Using Javascript method1:

HTML CODE:

<button id="btn6" type="button" class="btn btn-default"><p id="btn6Text">READ MORE ABOUT US<i id="glyph2" class="fa fa-caret-right fa-3x"></i></p></button>

JAVASCRIPT CODE:

/*CHANGE CLASS OF #glyph2 AT 991 OR LESS VW DURING DOCUMENT READY*/
if( $(window).innerWidth() <= 991)
  {document.getElementById("btn6Text").innerHTML = "READ MORE ABOUT US<i id='glyph2' class='fa fa-caret-right fa-2x'></i>";}
else if( $(window).innerWidth() > 991)
  {document.getElementById("btn6Text").innerHTML = "READ MORE ABOUT US<i id='glyph2' class='fa fa-caret-right fa-3x'></i>";}

/*CHANGE CLASS OF #glyph2 AT 991 OR LESS VW DURING RESIZE*/
$(window).resize(function () {
if( $(window).innerWidth() <= 991)    
  {document.getElementById("btn6Text").innerHTML = "READ MORE ABOUT US<i id='glyph2' class='fa fa-caret-right fa-2x'></i>";} 
else if( $(window).innerWidth() > 991)  
  {document.getElementById("btn6Text").innerHTML = "READ MORE ABOUT US<i id='glyph2' class='fa fa-caret-right fa-3x'></i>";};
}); 

So each time the window ends up less than 991px, I rewrite these code:

因此,每次窗口最终小于991px时,我都会重写这些代码:

<button id="btn6" type="button" class="btn btn-default"><p id="btn6Text">READ MORE ABOUT US<i id="glyph2" class="fa fa-caret-right fa-3x"></i></p></button>

To this:

<button id="btn6" type="button" class="btn btn-default"><p id="btn6Text">READ MORE ABOUT US<i id="glyph2" class="fa fa-caret-right fa-2x"></i></p></button>

Difference: fa-3x changes to code with fa-2x

差异:使用fa-2x对代码进行fa-3x更改

#3

If you are looking for a CSS only and Font-Awesome/Bootstrap styled solution, here's what you can do:

如果您正在寻找仅CSS和Font-Awesome / Bootstrap风格的解决方案,那么您可以执行以下操作:

Create some new CSS Classes to represent the lg, 2x, 3x, 4x and 5x. One for each bootstrap screen size that you want (sm, md and lg, for instance). Then use @media on them.

创建一些新的CSS类来表示lg,2x,3x,4x和5x。一个用于您想要的每个引导程序屏幕大小(例如,sm,md和lg)。然后在它们上使用@media。

You will end up with something like this:

你最终会得到这样的东西:

/* sm */
@media (min-width: 768px) { 
    .fa-3x-sm {
        font-size: 3em !important;
    }
    .fa-2x-sm {
        font-size: 2em !important;
    }
    .fa-lg-sm {
        font-size: 1.33333333em !important;
        line-height: 0.75em !important;
        vertical-align: -15% !important;
    }
}
/* md */
@media (min-width: 992px) {
    .fa-3x-md {
        font-size: 3em !important;
    }
    .fa-2x-md {
        font-size: 2em !important;
    }
    .fa-lg-md {
        font-size: 1.33333333em !important;
        line-height: 0.75em !important;
        vertical-align: -15% !important;
    }
}
/* lg */
@media (min-width: 1200px) {
    .fa-3x-lg {
        font-size: 3em !important;
    }
    .fa-2x-lg {
        font-size: 2em !important;
    }
    .fa-lg-lg {
        font-size: 1.33333333em !important;
        line-height: 0.75em !important;
        vertical-align: -15% !important;
    }
}

I'm using only the fa-lg, fa-2x and fa-3x to keep it short. With that, you could use a fa-3x-lg to get a 3x sized icon on lg resolution and a regular sized icon on smaller screens.

我只使用fa-lg,fa-2x和fa-3x来保持简短。有了这个,您可以使用fa-3x-lg在lg分辨率上获得3x大小的图标,在较小的屏幕上获得常规大小的图标。

Or, you could combine some of them just like you would on bootstrap solutions, just like using a fa-2x-sm fa-3x-mdwould give you 3x sized icons on md screen size and up, 2x sized icon on sm screen size and a regular sized icon on even smaller screens.

或者,您可以将它们中的一些组合在一起,就像使用自举解决方案一样,就像使用fa-2x-sm fa-3x-md将在md屏幕尺寸上提供3x大小的图标,在屏幕尺寸上提供2x大小的图标,甚至更小屏幕上的常规尺寸图标。

It's just like using some of bootstrap's convention on the FontAwesome sizing classes.

这就像在FontAwesome大小调整类上使用一些bootstrap的约定。

Hope it helps.

希望能帮助到你。