Build Your Own Business Website header image

Welcome to our Members Only Forum

You are welcome to view the content on our Forum, just scroll down to view this forum post.
If you like what you find and want to be able to post a question, please check out our subscription options.
Please feel free to search the forum using either the Google Site Search above or the forum search below.

Avatar
Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed sp_TopicIcon
Image next to text
Avatar
Mat Roberts
Jedi
Community Member

Members
Forum Posts: 95
Member Since:
January 16, 2017
sp_UserOfflineSmall Offline
1
May 20, 2017 - 12:24 pm
sp_Permalink sp_Print

I have attached a picture of what I'd like to add to a page. I realize this is probably very simple but I'm struggling to figure it out. I've searched and looked at many tutorials on this and I'm just not getting it. 

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
2
May 20, 2017 - 2:57 pm
sp_Permalink sp_Print

Matt - you picture didn't get added.  Try that again using the Attachments button right below this editor.

Avatar
Mat Roberts
Jedi
Community Member

Members
Forum Posts: 95
Member Since:
January 16, 2017
sp_UserOfflineSmall Offline
3
May 20, 2017 - 4:05 pm
sp_Permalink sp_Print

example-icon.PNG

sp_PlupAttachments Attachments
Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
4
May 21, 2017 - 2:53 pm
sp_Permalink sp_Print sp_EditHistory

If you are using Agility you could do something like this:

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>

 

It relies on the Font Awesome icons which are included.  For some reason the forum doesn't render the fonts, but I took that code from here.

If you aren't then you would probably use a very small image.  What skin are you using?

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
5
May 21, 2017 - 3:34 pm
sp_Permalink sp_Print

After I answered your other question I thought of a different answer.  Here is a video demonstrating how to do that.

Avatar
Mat Roberts
Jedi
Community Member

Members
Forum Posts: 95
Member Since:
January 16, 2017
sp_UserOfflineSmall Offline
6
May 24, 2017 - 6:03 am
sp_Permalink sp_Print

Fantastic! Thank you. 

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
7
May 24, 2017 - 7:29 am
sp_Permalink sp_Print

You're welcome.

Avatar
Mat Roberts
Jedi
Community Member

Members
Forum Posts: 95
Member Since:
January 16, 2017
sp_UserOfflineSmall Offline
8
May 24, 2017 - 6:35 pm
sp_Permalink sp_Print

How would I change it so they are next to eachother instead of in a stacked list? 

(Image) Scanners (Image) Free Trial 

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
9
May 25, 2017 - 7:37 am
sp_Permalink sp_Print

So bear in mind that these are not images.  They are icon fonts.

You would take them out of the un-ordered list.  Put both words on the same line with the same icon code in front of each word.

You might want to review how the fontawesome icons work and all the ways they can be used.  Agility automatically makes them available to you to use in any of the ways demonstrated on the fontawesome website.

Avatar
Mat Roberts
Jedi
Community Member

Members
Forum Posts: 95
Member Since:
January 16, 2017
sp_UserOfflineSmall Offline
10
May 28, 2017 - 5:10 am
sp_Permalink sp_Print

I have them side by side now thanks. How would I add a little space between the 1st icon + word and the 2nd? It all looks a bit smashed together. 

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
11
June 1, 2017 - 10:09 am
sp_Permalink sp_Print

If you add the fa-fw class to the icons that will give you some space.

Avatar
Mat Roberts
Jedi
Community Member

Members
Forum Posts: 95
Member Since:
January 16, 2017
sp_UserOfflineSmall Offline
12
June 1, 2017 - 3:41 pm
sp_Permalink sp_Print

Need more details. 

 

Replace the fa fa-wrench with fa fw-wrench?? 

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
13
June 2, 2017 - 6:16 am
sp_Permalink sp_Print

No, it means ADD fa-fw to the list of classes.  You should bookmark this page for examples of using icons - http://fontawesome.io/examples/

It shows the fixed width (fa-fw) example

Avatar
Mat Roberts
Jedi
Community Member

Members
Forum Posts: 95
Member Since:
January 16, 2017
sp_UserOfflineSmall Offline
14
June 10, 2017 - 5:37 am
sp_Permalink sp_Print

Now I'm needing to create a list of icons with a work under it similar to the attached pic. I don't need the separating pipe. 

Avatar
Mat Roberts
Jedi
Community Member

Members
Forum Posts: 95
Member Since:
January 16, 2017
sp_UserOfflineSmall Offline
15
June 10, 2017 - 10:10 am
sp_Permalink sp_Print

attachmentCapture.PNGImage Enlarger

sp_PlupAttachments Attachments
Avatar
Pierre Cote
Moderator
Members

Moderators

Community Member
Forum Posts: 1161
Member Since:
September 21, 2014
sp_UserOfflineSmall Offline
16
June 10, 2017 - 12:49 pm
sp_Permalink sp_Print

Hi

An example using WordPress UI Dashicons. Add a <span> to your div.

<div class="dashicons dashicons-admin-site" data-code="f319"><span class="dashname">admin-site</span></div>

I use a bit of CSS :

.dashname {
    color: black;
    display: block;
    font-size: 12px;
    text-align: center;
}
 
Pierre

Pierre ( postrophe )

Avatar
Mat Roberts
Jedi
Community Member

Members
Forum Posts: 95
Member Since:
January 16, 2017
sp_UserOfflineSmall Offline
17
June 10, 2017 - 2:07 pm
sp_Permalink sp_Print

Sorry that didn't help me. 

Avatar
Pierre Cote
Moderator
Members

Moderators

Community Member
Forum Posts: 1161
Member Since:
September 21, 2014
sp_UserOfflineSmall Offline
18
June 10, 2017 - 2:14 pm
sp_Permalink sp_Print

Hi

Need more details. 

A link to your site where you are trying this would help us to help you better.

Pierre ( postrophe )

Avatar
Mat Roberts
Jedi
Community Member

Members
Forum Posts: 95
Member Since:
January 16, 2017
sp_UserOfflineSmall Offline
19
June 10, 2017 - 4:13 pm
sp_Permalink sp_Print

networksecuritytools.com

Basically want an icon with text below it and it be hyperlinked. I want to put several in a horizontal row like the attachment in previous post. I tried putting the icons in a container then adding inline block to the icon class but no luck. 

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
20
June 11, 2017 - 8:00 am
sp_Permalink sp_Print

First off - you can do this with the extended query box if each of those labels links off to a separate page.

This is essentially the same as the Icon Query Box - except that you would specify multiple pages to be displayed.  This would be WAY easier - and more automatic - than hard coding it, unless you were a professional.

You would specify the icon to use in the Agility Page Details section of each page and then use the Icon & Headline boxes of the extended query box to display the icon & label.

You could also hard code it using HTML & Custom CSS.

In that case I would

  1. wrap each icon/label pair in a div.
  2. make the div a specific width and float it left
  3. make the icon display-block
  4. style both elements to taste
  5. wrap all of this in a self clearing div

I guess the other thing you could do is use a menu with the icon.

Forum Timezone: America/Los_Angeles

Most Users Ever Online: 228

Currently Online:
15 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Keith W Jones: 1431

Brian Tozer: 1004

Carolin: 982

Heidi Hafner: 509

John Cunningham: 423

Reece Morrel: 353

Newest Members:

emma62755

sharonmarks

emma80233

Tijs de Jong

Daniel Frey

mutek

Forum Stats:

Groups: 8

Forums: 46

Topics: 6998

Posts: 34804

 

Member Stats:

Guest Posters: 6

Members: 6761

Moderators: 2

Admins: 2

Administrators: Rick Anderson, Rick Anderson

Moderators: Pierre Cote, Laura Nugent