Как уменьшить размер иконки на маленьком экране в Bootstrap 4 - PullRequest
Новая
       23

Как уменьшить размер иконки на маленьком экране в Bootstrap 4

0 голосов
/ 10 ноября 2019

Как уменьшить размер иконки на маленьких экранах в начальной загрузке 4. Я работаю над начальной загрузкой. Моя цель - уменьшить размер иконки в начальной загрузке на маленьких экранах. Например, сейчас я нахожусь в размере экрана 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;
}

Ответы [ 2 ]

1 голос
/ 10 ноября 2019

Как указано в Font Awesome docs ..

"Значки наследуют размер шрифта родительского контейнера, что позволяет им соответствовать любому тексту, который вы можете использовать с ними. С помощью следующих классов мы можем увеличивать или уменьшать размер значков относительно этого унаследованного размера шрифта. "

Так что просто используйте запрос @media, чтобы быстро уменьшить размер шрифта .icon намобильный телефон .. 

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

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

0 голосов
/ 10 ноября 2019

Вы могли бы использовать миксины .scss, которые могли бы динамически определять размер экрана и выдавать соответствующий значок в зависимости от размера экрана.

В основном scss определяет размер экрана, область просмотра и т. Д., Ина основе этого служат наборы css, шрифты, что вы хотите.

...