Skip to main content
R
r_tist
Inspiring
January 24, 2017
Answered

insert graphic icon between text words, inline-block

  • January 24, 2017
  • 1 reply
  • 5623 views

Would like a graphic file of a small icon to be within the same sentence between text based words. Don't want any wrapping of the line as soon as it comes to the img icon. Want the small image to flow along with the text.

<p>Refer to this icon <div class="icon" alt="icon"></div>when accessing the activity.</p>

.icon {

    width: 24px;

    height: 23px;

    background: url('../img/icon.jpg') no-repeat;

    display: inline-block;

    }   

Do I need to add a display property to the <p> tag to better support this?

Thank you.

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Are you using the same icon as a bullet in a list?

    <ul>

         <li>some item</li>

         <li>some item</li>

         <li>some item</li>

    </ul>

    Or a unique icon for each line?

    Use a <span> tag.

    <p><span class="glyphicon glyphicon-alert"></span> Some text here</p>

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    January 24, 2017

    Are you using the same icon as a bullet in a list?

    <ul>

         <li>some item</li>

         <li>some item</li>

         <li>some item</li>

    </ul>

    Or a unique icon for each line?

    Use a <span> tag.

    <p><span class="glyphicon glyphicon-alert"></span> Some text here</p>

    Nancy O'Shea— Product User & Community Expert
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    January 24, 2017

    Just to add to Nancy's reply, there are a number of ways depending on what you want. The methods that I have used for inline icons is to use Font Awesome, which is similar to glyphicon and to use an SVG.

    The former looks like

    The code looks like

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    </head>
    <body>
    <h2>Font Awesome Demo</h2>
    <p>I like to use photography <i class="fa fa-camera"></i></p>
    <p>after which we will do some fine dining <i class="fa fa-cutlery"></i></p>
    <p>To see more, go to <a href="http://fontawesome.io/">Font Awesome</a> <i class="fa fa-external-link"></i></p>
    </body>
    </html>
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      January 25, 2017

      I use Font Awesome too because I think they look better and have more icon choices.

      Glyphicons are still supported in Bootstrap 3 but not in Bootstrap 4.

      Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices