"More" or ellipse icon in app bar

[David Smith]

I am trying to create a button that contains an ellipse (...) within an app bar. My problem is putting text within a .win-commandimage converts that text to an icon, but `win-commandimage' is the only class that get the command ring to match the size and positioning of all the other commands. The following work arounds produce the desired effect, but is there a better way? A more responsive way?

Here is my work around markup:

<button id="more-button" title="More" class="win-command">
  <span class="win-commandimage win-commandring">
    <span class="win-content">...</span>
  </span>
  <span class="win-label">More</span>
</button>

Here is the work around styling:

#more-button .win-commandimage .win-content {
  font-family: "Open Sans", ​ Arial, ​ Helvetica, ​ Sans-Serif;
  font-size: 2em;
  position: relative;
  top: -.3em;
}

Here is what it looks like:

Shouldn't this be easier to do?

[aozora]

which branch are you using?
try "1.0-wip"
win-command class should not have anymore the font familiy set to icomoon...

On Wed, Jan 23, 2013 at 5:54 PM, David Smith [e-mail]:

I am trying to create a button that contains an ellipse (...) within an
app bar. My problem is putting text within a .win-commandimage converts
that text to an icon, but `win-commandimage' is the only class that get the
command ring to match the size and positioning of all the other commands.
The following work arounds produce the desired effect, but is there a
better way? A more responsive way?

Here is my work around markup:

... More

Here is the work around styling:

#more-button .win-commandimage .win-content {
font-family: "Open Sans", ​ Arial, ​ Helvetica, ​ Sans-Serif;
font-size: 2em;
position: relative;
top: -.3em;
}

Here is what it looks like:
[image: More]https://f.cloud.github.com/assets/810378/90640/7b32b486-657d-11e2-8235-8257bfa6357a.png

Shouldn't this be easier to do?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/73.

[David Smith]

I'm using master. Is 1.0-wip finished enough to use everywhere?

[aozora]

It's a bit more than master, read the change log. Sadly this month and
before I hadn't time to work on bootmetro, things will change from
February. Let me know
On Jan 23, 2013 6:02 PM, "David Smith" [e-mail] wrote:

I'm using master. Is 1.0-wip finished enough to use everywhere?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/73#issuecomment-12609024.

[David Smith]

Updating to 1.0-wip and changing from .win-commandimage to .win-commandicon works as expected for my .win-content, but line 1 of bootmetro-icons-ie7.css changes the font-family of .win-label beneath icon-* to IcoMoon, as shown below:

This is the markup affected by the code:

<button id="edit-button" title="Edit Data" class="win-command">
  <span class="win-commandicon win-commandring icon-pencil" />
  <span class="win-label">Data</span>
</button>

I guess this does not happen in the Application Bar demo because it does not include bootmetro-icons-ie7.css. Should I not be using that? It is still in 1.0-wip.

[aozora]

bootmetro-icons-ie7.css is meant for IE7 compatibility, but is still a todo, so please don't use it for now.
There are still problems using icon fonts on IE7.