如何在 Bootstrap 4 中减小小屏幕中的图标大小

Question

如何在 bootstrap 中减小小屏幕中的图标大小 4. 我正在研究 bootstrap 我的目标是在小屏幕中减小 bootstrap 中的图标大小。例如，现在我的屏幕尺寸 Mobile S-320 PX，这里我需要减小图标大小。请帮我解决这个问题。如果我不清楚我的疑问，请发表评论。

这是Regform.js

import React, { Component } from 'react';
import './Regform.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSuitcase } from '@fortawesome/free-solid-svg-icons';


class Regform extends Component {
    render() {
        return (
            <div className='container-fluid customcolor'>
                <div className='row'>
                    <div className='col-12'>
                        <div className='Main'>
                            <div className='icon'>
                                <FontAwesomeIcon className='suitcasestyle fa-5x' icon={faSuitcase}></FontAwesomeIcon>
                            </div>
                            <div className='content'>
                                <h1>Job Application</h1>
                                <h3>Please complete the form below to apply for a position with us.</h3>
                            </div>
                            <div className='Mainform'>
                                <form>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Regform

这是Regform.css

.Main {
    display: flex;
    padding-top: 2%;
    padding-bottom: 2%;
}

.customcolor {
    background-color: #ff3f00
}


.suitcasestyle {
    color: white;
}

.content {
    padding-left: 10px;
}

.content h1, h3 {
    color: white;
}

Answer 1

您可以考虑使用 .scss 混合宏，它能够动态确定屏幕大小并根据屏幕大小提供适当的图标。

基本上 scss 会检测屏幕尺寸、视口等，并基于这些提供一组 css、字体，无论您想要什么。

Answer 2

如 Font Awesome docs..

中所述

"Icons inherit the font-size of their parent container which allow them to match any text you might use with them. With the following classes, we can increase or decrease the size of icons relative to that inherited font-size."

所以只需使用@media 查询响应地缩小移动设备上的 .icon 字体大小..

@media (max-width: 320px) {
    .icon {
        font-size: .5rem;
    }
}

https://www.codeply.com/p/jnkKSowuAX

如何在 Bootstrap 4 中减小小屏幕中的图标大小

How to decrease Icon size in small screen in Bootstrap 4

font-awesome

bootstrap-4