insert graphic icon between text words, inline-block

Report · Jan 24, 2017

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.

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

.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 tag to better support this?

Thank you.

Report · Jan 24, 2017

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

<ul>

</ul>

Or a unique icon for each line?

Use a tag.

Some text here

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jan 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, the only real Dreamweaver alternative.

Report · Jan 24, 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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jan 25, 2017

Oh yes, and I do use Font Awesome and glyphicons, but in this case it is a custom icon, a graphic.

Report · Jan 25, 2017

.icon-right{
width: 30px; // specify the dimensions
height: 18px;
display: inline-block; // by default, but just to make sure
vertical-align: middle; // vertical alignment
position: relative; // to allow micro alignment
top: -1px; // micro alignment
margin-left: 4px; // keep the distance from the text
}

Edit:

The HTML

This is my inline image <img src="img/myImage.png" class="icon-right" alt="">

Wappler, the only real Dreamweaver alternative.

Report · Jan 25, 2017

Bootstrap has a class.

Here is some text <img class="display-inline" src="your_image.jpg" alt="icon">

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

insert graphic icon between text words, inline-block

1 Correct answer