Estoy tratando de ajustar el texto alrededor de un elemento de fuente impresionante, pero obtengo el siguiente ingrese la descripción de la imagen aquí

Quiero que el texto comience desde arriba y que envuelva el elemento. es posible?

Aquí está el código que escribí https://www.bootply.com/KtlIG2icyT

2
Makis 17 ene. 2019 a las 13:55

3 respuestas

La mejor respuesta

Use esto <i class="far fa-file fa-9x text-info" style="float: left; margin-right:7px;"></i> en lugar de su <i class="far fa-file fa-9x text-info pull-left"></i>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
    
<div class="card border-secondary my-3">
        <div class="card-header">
            <h3>Title</h3>
        </div>
        <div class="card-body text-secondary">
            <div class="card-text">
                <div class="row align-text-top">
                    <div class="col px-5 ">

                        <i class="far fa-file fa-9x text-info" style="float: left; margin-right:7px;"></i>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

                    <div class="col">
                        <asp:fileupload id="fuDocument" runat="server" cssclass="btn btn-secondary" allowmultiple="False" height="200">
                        <p class="mt-2">
                            <asp:button id="btnUploadFile" runat="server" text="Υποβολή" cssclass="btn btn-primary" onclick="btnUploadFile_Click">
                        </asp:button></p>

                    </asp:fileupload></div>

                </div>
            </div>
        </div>
    </div>
</div>


            <div id="push"></div>
        
2
Udhay Titus 17 ene. 2019 a las 11:06

Si bien las respuestas anteriores pueden resolver el problema, la recomendación de usar CSS personalizado en línea desagradable es completamente innecesaria. BS 4.x ya tiene todas las clases necesarias:

.float-left en lugar de style="float: left;"
.mr-sm-2 en lugar de style="margin-right:7px;"

<i class="far fa-file fa-9x float-left mr-sm-2"></i> ... 

Exactamente lo mismo, solo la "forma de arranque". En realidad, es mejor porque los márgenes calculados de Bootstraps se escalan y responden. Considere también

.ml-sm-*, .mt-sm-*, .mb-sm-*, para los márgenes izquierdo, superior e inferior
.pl-sm-*, .pr-sm-*, .pt-sm-*, .pb-sm-* para rellenos adicionales

0
davidkonrad 28 may. 2020 a las 06:58

Aquí está mi trabajo: https://codepen.io/anon/pen/ZVNpQE

Pude solucionarlo agregando (ver más abajo) a su elemento de icono:

float: left
1
Tom Dickson 17 ene. 2019 a las 11:06